angular - Passport.js,Auth0 CORS 错误
问题描述
我正在尝试使用 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:对预检请求的响应未通过访问控制检查:没有“访问控制” -Allow-Origin' 标头出现在请求的资源上。因此,Origin 'null' 不允许访问。
根据此处的解决方案,看起来回调可能是错误的,但我不明白为什么回调不正确会出现 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));
这也不起作用。
解决方案
错误中的 url 显示您正在调用路由“/回调”,但我在您的代码中没有看到这样的路由。
作为旁注,您可以尝试一下众所周知的cors npm 包
推荐阅读
- linux - 回声标准输入混乱
- tensorflow - 配置文件 TensorFlow 对象检测 API
- python - Joblib 并附加到列表
- javascript - 填充时自动生成两个重复的 ID 字段(_id 和 id)
- javascript - 推送到索引处的对象数组
- typescript - Typescript:使用泛型数组按照泛型列表的顺序创建具有泛型的对象数组
- apache-kafka - 如何在 Kafka Streams 应用程序中进行订购
- python - 使用 OpenCv 在网络摄像头上创建和捕获子区域
- c++ - 安全地传递对象的动态数组而不强制复制
- c# - C# 控制台和 PS 或 CMD 之间的脚本输出不同