CORS 在 React + Express 应用程序上使用 passport-azure-ad 错误

Question

I have a React + Express app for which I am using the passport-azure-ad OIDCStrategy, but I'm having trouble with CORS.

The error I am receiving is: Access to XMLHttpRequest at 'https://login.microsoftonline.com/...' (redirected from '{SERVER_URL}') from origin '{FRONTEND_URL}' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

My frontend and backend are on different domains (I added a header on the backend to allow the frontend origin). I tried adding both urls as Redirect URIs, but that doesn't seem to help.

Is there a way to set Access-Control-Allow-Origin headers in Azure? Or is there a configuration in the React code which I'm missing?

Answer 1

Is there a way to set Access-Control-Allow-Origin headers in Azure? Or is there a configuration in the React code which I'm missing?

Generally, this error occurs when the front end and backend is running on different ports.

The browser will not accept the responses from the backend because of the CORS headers not present.

So, we have to add the CORS headers in the backend request to overcome this issue by using the cors npm package below:

var express = require('express')  
var cors = require('cors')  
var app = express()  
app.use(cors())  

It enables CORS headers with all the requests.
you can refer to cors documentation for more information.

Also, We can enable CORS for Azure App Service in azure portal as mentioned here .

Answer 2

You have to use CORS package in the backend and give cros access in your domain like

 const cors = require('cors') var corsOptions = { origin: '*', optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204 } app.use(cors(corsOptions));

Answer 3

Don't use fetch from react to api to oauth service, use a link

Kindly check out this github issue https://github.com/jaredhanson/passport/issues/734 I hope it helps.