Angular 5/Express/CORS结合Facebook OAuth授权问题求助

嘿，我之前帮不少开发者踩过这个坑，核心问题其实是你搞错了Facebook OAuth的正确打开方式——直接在Angular里发AJAX请求到Facebook授权端点肯定会触发CORS，因为Facebook的API不会允许任意前端域名跨域请求。咱们换个思路就能搞定：

第一步：修正前端的登录触发逻辑 #

把你当前用HTTP请求的方式，改成页面跳转到后端的Passport授权路由，这样浏览器会直接发起重定向请求，绕开AJAX的CORS限制。

修改Angular组件代码 #

把你的onFacebookLogin()方法改成这样：

onFacebookLogin() {
  // 跳转到后端的Passport Facebook授权路由
  window.location.href = 'http://你的后端域名/auth/facebook';
}

你的按钮代码可以原样保留，只需要更新方法逻辑：

<button (click)="onFacebookLogin()" class="loginBtn loginBtn-facebook">
  <span><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_facebook.png"/></span>
  | Login with Facebook...
</button>

第二步：后端配置CORS（Express端） #

虽然跳转绕开了前端到Facebook的CORS，但前端和后端之间可能还是跨域，得在Express里正确配置CORS，确保会话和Cookie能正常传递。

先安装cors包：

npm install cors

然后在Express入口文件（比如app.js）里配置：

const cors = require('cors');

// 配置CORS，允许你的前端域名
app.use(cors({
  origin: 'http://你的Angular前端域名:端口号', // 比如http://localhost:4200
  credentials: true, // 允许携带Cookie，这对Passport的会话很重要
  optionsSuccessStatus: 200
}));

第三步：确保PassportJS Facebook策略配置正确 #

检查你的Passport Facebook策略，回调URL必须是后端地址，并且要和你在Facebook开发者后台里配置的完全一致：

const passport = require('passport');
const FacebookStrategy = require('passport-facebook').Strategy;

passport.use(new FacebookStrategy({
    clientID: '你的Facebook App ID',
    clientSecret: '你的Facebook App Secret',
    callbackURL: 'http://你的后端域名/auth/facebook/callback' // 比如http://localhost:3000/auth/facebook/callback
  },
  function(accessToken, refreshToken, profile, done) {
    // 这里处理用户逻辑：比如查找/创建数据库里的用户
    User.findOrCreate({ facebookId: profile.id }, function (err, user) {
      return done(err, user);
    });
  }
));

// 注册授权和回调路由
app.get('/auth/facebook', passport.authenticate('facebook'));

app.get('/auth/facebook/callback',
  passport.authenticate('facebook', { failureRedirect: '/login' }),
  function(req, res) {
    // 授权成功后，重定向回Angular前端，带上用户信息或者JWT
    // 比如可以把用户ID或token拼在URL里，或者设置Cookie后跳转
    res.redirect('http://你的Angular前端域名:端口号/dashboard?user=' + JSON.stringify(req.user));
  });

第四步：Facebook开发者后台关键配置 #

这一步很容易忘，一定要检查：

• 在你的Facebook App的产品 > Facebook登录 > 设置里，把有效的OAuth跳转URI设置成你后端的回调URL（比如http://localhost:3000/auth/facebook/callback）
• 在设置 > 基本里，把网站域名添加你的前端和后端域名

为什么之前的方法会触发CORS？ #

浏览器的同源策略只限制前端AJAX请求，而服务器和服务器之间的通信（比如你的Express后端请求Facebook API）不受这个限制。所以通过后端代理授权流程，就能完美避开CORS问题。

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