如何解决我的 MERN 应用程序中用于 MSAL 身份验证的 Access-Control-Allow-Origin CORS 错误？

如何解决如何解决我的 MERN 应用程序中用于 MSAL 身份验证的 Access-Control-Allow-Origin CORS 错误？

我正在尝试通过单击按钮在我的 MERN 应用中通过 MSAL 进行身份验证。

但是我收到此错误：

访问 XMLHttpRequest 在 'https://login.microsoftonline.com/common/oauth2/v2.0/a...' （重定向自 'http:///api/auth/signin'） from origin “http://”已被 CORS 策略阻止：否 请求中存在“Access-Control-Allow-Origin”标头 资源。

这是我的 NodeJS 服务器的代码：

const express = require("express");
const session = require('express-session');
const authRoutes = require("./routes/auth.routes");
const msal = require('@azure/msal-node');
const cors = require("cors");
require("dotenv").config();

const app = express();
const corsOptions = {
    origin : process.env.CLIENT_URL,credentials: true,"allowedHeaders": ["sessionId","Content-Type"],"exposedHeaders": ["sessionId"],"methods": "GET,HEAD,PUT,PATCH,POST,DELETE","preflightContinue": false
}
app.use(cors(corsOptions));


// Demo only
app.locals.users = {};

// MSAL Config
const msalConfig = {
    auth: {
        clientId: process.env.OAUTH_APP_ID,authority: process.env.OAUTH_AUTHORITY,clientSecret: process.env.OAUTH_APP_SECRET
    },system: {
        loggerOptions: {
            loggerCallback(loglevel,message,containsPii) {
                console.log(message);
            },piiLoggingEnabled: false,logLevel: msal.LogLevel.Verbose,}
    }
};

app.locals.msalClient = new msal.ConfidentialClientApplication(msalConfig);

// Session middleware
app.use(session({
secret: 'your_secret_value_here',resave: false,saveUninitialized: false,unset: 'destroy'
}));

app.use("/api/auth",authRoutes);

app.get("/",(req,res) => {
    res.send("Hello World!");
});

app.listen(process.env.PORT,() => {
    console.log(`Server is running on port ${process.env.PORT}`);
});

module.exports = app;

这是我的 auth.controller 方法：

module.exports = {
    signIn: async (req,res) => {
        const urlParameters = {
            scopes: process.env.OAUTH_ScopES.split(','),redirectUri: process.env.OAUTH_REDIRECT_URI
        };
    
        try {
            const authUrl = await req.app.locals.msalClient.getAuthCodeUrl(urlParameters);
            res.redirect(authUrl);
        } catch (error) {
            console.log(`Error: ${error}`);
            res.redirect("/");
        }
    },callback: async (req,res) => {
        const tokenRequest = {
            code: req.query.code,scopes: process.env.OAUTH_ScopES.split(","),redirectUri: process.env.OAUTH_REDIRECT_URI
        };
    
        try {
            const response = await req.app.locals.msalClient.acquiretokenByCode(tokenRequest);
            req.session.userId = response.account.homeAccountId;
    
            const user = await graph.getUserDetails(response.accesstoken);
            req.app.locals.users[req.session.userId] = {
                displayName: user.displayName,email: user.mail || user.userPrincipalName,timeZone: user.mailBoxSettings.timeZone
            };
        } catch (error) {
            console.log(`Error: ${error}`);
        }
        
        res.redirect("/");
    },signOut: async (req,res) => {
        if (req.session.userId) {
            const accounts = await req.app.locals.msalClient.getTokenCache().getAllAccounts();
            const userAccount = accounts.find(a => a.homeAccountId === req.session.userId);
    
            if (userAccount) {
                req.app.locals.msalClient.getTokenCache().removeAccount(userAccount);
            }
        }
    
        req.session.destroy(err => res.redirect("/"));
    }
};

这是 React 部分：

import React from 'react';
import axios from "axios";

const App = () => {
    const handleConnect = () => {
        axios({
            method: "get",url: `${process.env.SERVER_URL}/api/auth/signin`,withCredentials: true
        })
        .then(res => console.log(res.data))
        .catch(err => console.log(err));
    };

    return (
        <button onClick={handleConnect}>Connect</button>
    );
};

export default App;

在我的 Azure Active Directory 管理中心，我的重定向 URI 是：

• “”作为“SPA”
• “/api/auth/signin”为“Web”

解决方法

devtools 中的网络选项卡有助于解决此类问题。

您可能需要处理 CORS preflight requests，通过在您的 express 应用中放置类似的内容来处理 OPTIONS 请求。

app.options('*',cors())

对于任何路线，将此行放在 app.use() 之前。

这在生产中有点我。哎哟！

,

将 Access-Control-Allow-Origin 设置为 * 风险很大，不推荐使用。这意味着您允许任何源从您的服务器接收响应。

删除 CORS 意味着将执行同源策略，因此它不起作用。

要解决客户端和服务器之间的问题，您可以在 React 应用程序的 package.json 文件中设置一个代理，该文件将指向您的服务器："proxy": "YourServerURI"。

关于最初的 MSAL 错误问题，我建议您仔细检查您的应用是否已正确注册并有权访问您的服务器。