Express+Passport+CORS:允许多个域使用会话

Question

我正在尝试让前端(React JS(与我的后端服务器(Express JS(一起工作。我仍在与CORS作战。前端请求仍然被CORS阻止。

根据CORS文档，我已将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与localhost一起使用，那是因为我被告知要这样做，因为我必须在登录后从axios请求发送withCredentials: true标头以保持会话
我刚刚添加了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);

如果我删除以前的代码，它甚至对一个域都不起作用。

那么，为了让服务器从多个域获取数据，我必须更改什么？提前谢谢。

Answer 1

将credentials和allowedHeaders选项添加到corsOptions配置

credentials: true,
allowedHeaders: ['Origin, X-Requested-With, Content-Type, Accept'],

读取https://www.npmjs.com/package/cors#configuration-选项

此外，您可以将127.0.0.1的域列入白名单，因为您可能希望通过localhost或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));