Node.js React集成Facebook登录遭遇CORS问题求助

我正尝试使用Passport和FacebookStrategy实现Facebook登录，相关代码如下：

passport.use(
    new FacebookStrategy(
        {
            clientID: 'myclientid',
            clientSecret: 'myclientsecret',
            callbackURL: 'http://localhost:3333/api/auth/facebook/callback',
            profileFields: ['email', 'displayName', 'name'],
        },
        async function (accessToken, refreshToken, profile, done) {
            ...     
        },
    ),
)

路由配置：

router.get('/facebook', passport.authenticate('facebook', { scope: 'email' }))
router.get('/facebook/callback', passport.authenticate('facebook'), AuthControllerV3.loginFacebookWeb)

但从客户端调用/facebook端点时，出现以下CORS错误：

Access to XMLHttpRequest at
'https://www.facebook.com/v3.2/dialog/oauth?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3333%2Fapi%2Fauth%2Ffacebook%2Fcallback&scope=email&client_id=myclientid'
(redirected from 'http://localhost:3333/api/auth/facebook') from
origin 'http://localhost:3000' has been blocked by CORS policy:
Response to preflight request doesn't pass access control check: No
'Access-Control-Allow-Origin' header is present on the requested
resource.

我已在客户端添加如下请求头：

config.headers.common['Content-Type'] = 'application/json';
config.headers.common['Access-Control-Allow-Origin'] = true;

但仍存在CORS问题。我已在Facebook开发者控制台添加域名http://localhost:3000，但问题依旧，请问该如何解决？

核心原因 #

Facebook OAuth登录是重定向流程，不是AJAX请求。你用XMLHttpRequest/fetch调用/facebook端点时，浏览器会把跨域重定向判定为违反CORS规则，因此拦截请求。

具体解决步骤 #

1. 修改前端调用方式
   不要用AJAX请求/facebook，改成直接让用户跳转：

   • 用HTML标签：

     <a href="http://localhost:3333/api/auth/facebook">使用Facebook登录</a>
     

   • 或者前端JS：

     window.location.href = 'http://localhost:3333/api/auth/facebook';
     

2. 后端配置CORS（针对回调后的接口）
   确保后端服务（localhost:3333）允许localhost:3000的跨域请求，因为登录成功后，loginFacebookWeb接口需要返回数据给前端页面。可以用cors中间件：

   const cors = require('cors');
   // 允许localhost:3000跨域，同时支持携带凭证
   app.use(cors({ origin: 'http://localhost:3000', credentials: true }));
   

3. 删除无效的客户端请求头
   Access-Control-Allow-Origin是服务器返回给客户端的响应头，不是客户端发送的请求头，删掉客户端代码里的这行：

   // 删掉这行，完全没用
   config.headers.common['Access-Control-Allow-Origin'] = true;
   

内容的提问来源于stack exchange，提问作者nacho