Passport.js，Auth0 CORS 错误

Question

我正在尝试使用 Angular 5 和 Express 设置一个单页应用程序，该应用程序使用 Passport.js 和 Auth0 进行身份验证。我尝试登录时不断收到此错误：

加载失败 https://example.auth0.com/authorize?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fcallback&client_id=example: 对预检请求的响应未通过访问控制检查：否 请求中存在“Access-Control-Allow-Origin”标头 资源。因此不允许访问 Origin 'null'。

根据the solution here，看起来回调可能是错误的，但我不明白为什么回调不正确会出现CORS错误，或者这甚至与单页应用程序相关。

目前在开发中，我在 localhost:8080 上运行我的 Angular 应用程序，在 localhost:3000 上运行我的服务器。显然，有时我需要在同一台服务器上同时运行它们，但也许这会导致问题？...

我在 Auth0 设置页面中尝试了几项操作，但不确定在回调 URL、允许的 Web 来源和允许的来源 (CORS) 字段中输入什么。

var express = require('express');
var passport = require('passport');
var Auth0Strategy = require('passport-auth0');
var db = require('./db');

const CLIENT_ORIGIN = 'http://localhost:8080';
const SERVER_PORT_NUMBER = 3000;

passport.use(new Auth0Strategy({
    domain: 'example.auth0.com',
    clientID: 'example',
    clientSecret: '7Jk3OdKOgWEKta8UFSrAU6lD04kPizC9aT0x6M8FlY1R7QTtJk_vqutYdfk3gUul',
    callbackURL: '/callback',
  },
  function(accessToken, refreshToken, extraParams, profile, cb) {
    return done(null, profile);
  }
));

passport.serializeUser(function(user, cb) {
  cb(null, user.email);
});

passport.deserializeUser(function(email, cb) {
  db.users.findByEmail(email, function(err, user) {
    if (err) {
      return cb(err);
    }
    cb(null, user);
  });
});

var app = express();

app.all('/*', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  next();
});

app.use(function(req, res, next) {

  res.setHeader('Access-Control-Allow-Origin', CLIENT_ORIGIN);
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
  res.setHeader('Access-Control-Allow-Credentials', true);
  next();

});

// Configure view engine to render EJS templates.
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');

app.use(require('morgan')('combined'));
app.use(require('cookie-parser')());
app.use(require('body-parser').urlencoded({
  extended: true
}));
app.use(require('express-session')({
  secret: 'keyboard cat',
  resave: false,
  saveUninitialized: false
}));

app.use(passport.initialize());
app.use(passport.session());

app.get('/',
  function(req, res) {
    res.render('home', {
      user: req.user
    });
  });

app.get('/user/login',
  function(req, res) {
    res.render('login');
  });

app.get('/callback',
  function(req, res) {
      console.log('test);
  });

app.post('/user/login',
  passport.authenticate('auth0', {
    failureRedirect: '/login'
  }),

  function(req, res) {
    res.redirect('/');
  });

app.get('/user/logout',
  function(req, res) {
    req.logout();
    res.redirect('/');
  });

app.get('/user/profile',
  require('connect-ensure-login').ensureLoggedIn(),
  function(req, res) {
    res.render('profile', {
      user: req.user
    });
  });


app.listen(SERVER_PORT_NUMBER);

更新：我还按照建议尝试了 npm cors：

const corsOptions = {
  origin: '*',
  methods: 'GET,POST,OPTIONS,PUT,PATCH,DELETE',
  allowedHeaders: 'X-Requested-With,content-type',
  credentials: true,
}

app.use(cors(corsOptions));

这也没有用。

Answer 1

错误中的 url 显示您正在调用路由“/callback”，但我在您的代码中没有看到这样的路由。

作为旁注，您可以尝试一下众所周知的cors npm package