时间戳

首页 > 解决方案 > Express + Passport + CORS：允许多个域的会话

javascript - Express + Passport + CORS：允许多个域的会话

问题描述

我正在尝试使前端（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));

如果有人问我为什么要在 localhost 上使用 CORS，是因为我被告知要这样做，因为我必须withCredentials: true从 axios 请求发送标头以在登录后保持会话。
我只是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);

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

那么，为了让服务器从多个域中获取数据，我必须进行哪些更改？提前致谢。

标签： javascriptnode.jsexpresscorspassport.js

解决方案

向您的 corsOptions 配置添加credentials和选项allowedHeaders

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

阅读https://www.npmjs.com/package/cors#configuration-options

此外，您可以使用 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));

推荐阅读