Express + Passport + CORS:session 允许多个域
Express + Passport + CORS: session allowed for multiple domains
我正在尝试让前端 (React JS) 与我的后端服务器 (Express JS) 一起工作。我仍在与 CORS 作斗争。前端请求仍然被 CORS 阻止。
根据CORS documentation,我已将我的 Express 实例设置为使用 cors()
作为中间件:
const app = express();
// Middlewares
const whitelist = [
'http://localhost:3000',
'http://localhost:3001'
];
const corsOptions = {
origin: function (origin, callback) {
if (whitelist.indexOf(origin) !== -1) {
callback(null, true);
} else {
callback(new Error('Not allowed by CORS'));
}
}
};
app.use(cors(corsOptions));
如果有人问我为什么要在本地主机上使用 CORS,那是因为有人告诉我这样做,因为我必须从 axios 请求中发送 withCredentials: true
header 以保持 session 登录后。
我刚刚添加了 axios.defaults.withCredentials = true
来拦截前端的请求。
在向 corsOptions
添加更多域之前,它的工作方式是设置一个中间件,让服务器与前端一起工作:
export const setHeaders = (req, res, next) => {
res.header('Access-Control-Allow-Origin', process.env.APP_URL);
res.header('Access-Control-Allow-Credentials', true);
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
next();
};
...
app.use(setHeaders);
如果我删除以前的代码,它甚至对一个域都不起作用。
那么,为了让服务器从多个域获取数据,我必须更改什么?提前致谢。
将 credentials
和 allowedHeaders
选项添加到您的 corsOptions 配置中
credentials: true,
allowedHeaders: ['Origin, X-Requested-With, Content-Type, Accept'],
阅读https://www.npmjs.com/package/cors#configuration-options
此外,您可以将 127.0.0.1 的域列入白名单,因为您可能希望通过本地主机或 127.0.0.1 访问它们
完整代码
const app = express();
// Middlewares
const whitelist = [
'http://localhost:3000',
'http://127.0.0.1:3000'.
'http://localhost:3001',
'http://127.0.0.1:3001',
];
const corsOptions = {
credentials: true,
allowedHeaders: ['Origin, X-Requested-With, Content-Type, Accept'],
origin: function (origin, callback) {
if (whitelist.indexOf(origin) !== -1) {
callback(null, true);
} else {
callback(new Error('Not allowed by CORS'));
}
}
};
app.use(cors(corsOptions));
我正在尝试让前端 (React JS) 与我的后端服务器 (Express JS) 一起工作。我仍在与 CORS 作斗争。前端请求仍然被 CORS 阻止。
根据CORS documentation,我已将我的 Express 实例设置为使用 cors()
作为中间件:
const app = express();
// Middlewares
const whitelist = [
'http://localhost:3000',
'http://localhost:3001'
];
const corsOptions = {
origin: function (origin, callback) {
if (whitelist.indexOf(origin) !== -1) {
callback(null, true);
} else {
callback(new Error('Not allowed by CORS'));
}
}
};
app.use(cors(corsOptions));
如果有人问我为什么要在本地主机上使用 CORS,那是因为有人告诉我这样做,因为我必须从 axios 请求中发送 withCredentials: true
header 以保持 session 登录后。
我刚刚添加了 axios.defaults.withCredentials = true
来拦截前端的请求。
在向 corsOptions
添加更多域之前,它的工作方式是设置一个中间件,让服务器与前端一起工作:
export const setHeaders = (req, res, next) => {
res.header('Access-Control-Allow-Origin', process.env.APP_URL);
res.header('Access-Control-Allow-Credentials', true);
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
next();
};
...
app.use(setHeaders);
如果我删除以前的代码,它甚至对一个域都不起作用。
那么,为了让服务器从多个域获取数据,我必须更改什么?提前致谢。
将 credentials
和 allowedHeaders
选项添加到您的 corsOptions 配置中
credentials: true,
allowedHeaders: ['Origin, X-Requested-With, Content-Type, Accept'],
阅读https://www.npmjs.com/package/cors#configuration-options
此外,您可以将 127.0.0.1 的域列入白名单,因为您可能希望通过本地主机或 127.0.0.1 访问它们
完整代码
const app = express();
// Middlewares
const whitelist = [
'http://localhost:3000',
'http://127.0.0.1:3000'.
'http://localhost:3001',
'http://127.0.0.1:3001',
];
const corsOptions = {
credentials: true,
allowedHeaders: ['Origin, X-Requested-With, Content-Type, Accept'],
origin: function (origin, callback) {
if (whitelist.indexOf(origin) !== -1) {
callback(null, true);
} else {
callback(new Error('Not allowed by CORS'));
}
}
};
app.use(cors(corsOptions));