【问题标题】:Express + Passport + CORS: session allowed for multiple domainsExpress + Passport + CORS:允许多个域的会话
【发布时间】:2020-07-02 20:14:01
【问题描述】:

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

如果有人问我为什么要在 localhost 上使用 CORS,是因为我被告知要这样做,因为我必须从 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);

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

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

【问题讨论】:

    标签: javascript node.js express cors passport.js


    【解决方案1】:

    credentialsallowedHeaders 选项添加到您的 corsOptions 配置中

    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));
    

    【讨论】:

      猜你喜欢
      • 2015-01-15
      • 1970-01-01
      • 2013-03-11
      • 2018-02-22
      • 2022-01-14
      • 2018-08-17
      • 1970-01-01
      • 2017-02-15
      相关资源
      最近更新 更多