CORS Issue

Library

• msal@1.x.x or @azure/msal@1.x.x
• @azure/msal-browser@2.x.x
• @azure/msal-node@1.x.x
• @azure/msal-react@1.x.x
• @azure/msal-angular@0.x.x
• @azure/msal-angular@1.x.x
• @azure/msal-angular@2.x.x
• @azure/msal-angularjs@1.x.x

Description

Trying to generate token from registered app to access another api. Permission is granted in active directory app registration. http://localhost:3001/ added to redirect URI under SPA but getting following error

“‘https://login.microsoftonline.com/xxxxxx/oauth2/v2.0/token’ from origin ‘http://localhost:3001’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource”

Source

const msal = require('@azure/msal-node');

 const config = {
  auth: {
  clientId: "sdsdwewewew-b98c-4bd4-a3d7-c3da07753a52",
  authority: "https://login.microsoftonline.com/xxxx.onmicrosoft.com",
  clientSecret: "Uxpsdwwewewewewo_4HqFk",
  redirectUri: "http://localhost:3001/"
 },
system: {

  piiLoggingEnabled: false,
  logLevel: msal.LogLevel.Verbose,
},
cache: {
  cacheLocation: "localStorage", // Needed to avoid "User login is required" error.
  storeAuthStateInCookie: false // Recommended to avoid certain IE/Edge issues.
  }

}

const authenticate = (): any => {

  const cca = new msal.ConfidentialClientApplication(config);
   const clientCredentialRequest = {
   scopes: ["api://zsdsdsdsdsd/.default"],
 };

 cca.acquireTokenByClientCredential(clientCredentialRequest).then((response: any) => {
   console.log("Response: ", response);
 }).catch((error: any) => {
   console.log(JSON.stringify(error));
 });

}

export default authenticate;

• Internal (Microsoft)
• Customer request

[pkanher617]

this is for a single page app that tried to call back end api. for it to access backend api

@tharaka86 I think there is a misunderstanding here. I’m not asking what resource you are communicating with. I’m asking which component are you trying to authenticate? Regardless of where the API that you are retrieving data from is located, an application environment restricted to the browser (AKA a Single-Page Application) can only authenticate on behalf of a user - it cannot authenticate the app itself. If your application is a Single-Page Application BUT it also communicates with a backend server that you own then you can use the backend server that you own to make confidential client requests without user interaction, and then the backend server that you own can make requests to the backend api you are trying to access. Does this make sense?

@pkanher617 thanks, its clear now. Thanks for the help

Absolutely! If there is nothing else can I close this issue?

[tharaka86]

this is for a single page app that tried to call back end api. for it to access backend api

@tharaka86 I think there is a misunderstanding here. I’m not asking what resource you are communicating with. I’m asking which component are you trying to authenticate?

Regardless of where the API that you are retrieving data from is located, an application environment restricted to the browser (AKA a Single-Page Application) can only authenticate on behalf of a user - it cannot authenticate the app itself.

If your application is a Single-Page Application BUT it also communicates with a backend server that you own then you can use the backend server that you own to make confidential client requests without user interaction, and then the backend server that you own can make requests to the backend api you are trying to access.

Does this make sense?

@pkanher617 thanks, its clear now. Thanks for the help