AADSTS9002326: Cross-origin token redemption is permitted only for the 'Single-Page Application'

Question

I am trying to send cross origin request to get access token on my React spa app localhost. I got the first 'Access-Control-Allow-Origin' error, to solve it I defined proxy to webpack.

When I run the code block below, I get 400 bad request errors.

Proxy code
'/payment': {
  target: 'https://apitest.domain.com',
  changeOrigin: true,
  secure: false,
  pathRewrite: { '^/payment': '' },
}
-------------------
  async getPaymentAccessToken() {
    const msg = await request<PaymentAccessTokenResponse>(`/payment/accesstoken/get`, {
      method: 'POST',
      prefix: undefined,
      credentials: 'include',
      headers: {
        client_id: this.client.client_id,
        client_secret: this.client.client_secret,
        'Ocp-Apim-Subscription-Key': this.client['payment-Subscription-Key'],
        'Merchant-Serial-Number': this.client['Merchant-Serial-Number']!,
      },
    });

    return msg;
  }

{"error":"invalid_request","error_description":"AADSTS9002326: Cross-origin token redemption is permitted only for the 'Single-Page Application' client-type.\r\nTrace ID: 0c7f2993-b612-434d-9cee-244e88f51600\r\nCorrelation ID: 45d80262-c77f-487b-a95b-4566c736e1bc\r\nTimestamp: 2022-06-07 19:14:30Z","error_codes":[9002326],"timestamp":"2022-06-07 19:14:30Z","trace_id":"0c7f2993-b612-434d-9cee-244e88f51600","correlation_id":"45d80262-c77f-487b-a95b-4566c736e1bc","error_uri":"https://login.windows.net/error?code=9002326"}

Answer 1

Make sure Azure app is registered for SPA platform. You can refer Microsoft official doc This should solve the issue.

check more config options and samples here

Answer 2

migrate frontend redirect uris to "single-page application".

if "single-page application" does not exist click add a platform

Answer 3

It's weird, and sometimes you need to change the type in the Manifest:

"replyUrlsWithType": [
    {
        "url": "http://localhost:5173/",
        "type": "spa"
    }
],

If the type is Spa, you should change it to spa. Making it all lower cases.