Express.js 和 CORS

Question

我使用react.js构建了一个前端，使用express.js构建了一个 API 服务器。 为了处理 CORS，我使用了cors包作为以下示例：

var passport = require("passport");
const express = require('express');
const cors = require('cors');

const app = express();
app.use(cors());
app.use('/route1', passport.authenticate('jwt', {session: false}), route1)
app.use('/route2', passport.authenticate('jwt', {session: false}), route2)
app.use('/route3', passport.authenticate('jwt', {session: false}), route3)

app.use(function(req, res, next) { /* catch 404 and forward to error handler */
  next(createError(404));
});

app.listen(app.get('port'), () => {    
  logger.info('Server started')
})  

所有路由都运行良好，直到对同一路由发出两个连续的请求。 例如：

POST example.com/route1
GET example.com/route1

我会收到错误消息No 'Access-Control-Allow-Origin' header is present on the requested resource. 在 GET 请求的浏览器控制台中。 但是，如果我将路线的路径更改为，例如：

POST example.com/route1
GET example.com/route1/example

有用。

两台服务器都在 apache 网络服务器上运行。 我的后端服务器由 https 访问，将其重定向到在 http 上运行的 nodejs 服务器。

我究竟做错了什么？ 谢谢你。

编辑：如所问，这里是route1的片段

const express = require('express')
const router = express.Router()
const errors = require('./error_handler');

router.post('/', async (req, res, next) => {
    const result = 
        /* DB Middleware */
        .catch((err) => errors.errorHandler(err,res))

    if(!res.headersSent) /* Making this condition to check if errorHandler() already sent an error response */
        res.send(result);
})

router.get('/', async (req, res, next) => {
    if(req.query.course === undefined)
        res.send(400);  


    let result =
        /* DB Middleware */
        .catch((err) => errors.errorHandler(err,res))


    if(!res.headersSent)
        res.send(result)
})

module.exports = router

Answer 1

不久前我在一个项目中遇到了这个问题，我将它添加到我的应用程序中，并为我工作。 这是因为您需要允许每个来源访问您的项目。

app.use(function (req, res, next) {
    // Website you wish to allow to connect
    res.setHeader('Access-Control-Allow-Origin', '*');
    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader('Access-Control-Allow-Credentials', true);
    // Pass to next layer of middleware
    next();
});

如果它不起作用，请尝试将 crossDomain 添加到您的请求中，例如：

 $.ajax({
    url: url,
    crossDomain: true,
    data: form,
    dataType: 'json',
    success: function(data) {
        console.log(data);
    },
    type: 'POST'
});

Answer 2

在 app.js 中包含以下代码：

var express = require('express')
var cors = require('cors')
var app = express()
var whitelist = ['http://example1.com', 'http://example2.com']
var 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 的任何 API。

var AllowedOrigins = ['http://example1.com', 'http://example2.com'];
setCorsHeaders: function (req, res, next) {
    let requestDomain = req.headers.Origin;
     AllowedOrigins.forEach(allowedOrigin => {
         if (requestDomain === allowedOrigin) {
            res.setHeader('Access-Control-Allow-Origin', requestDomain);
            res.setHeader('Access-Control-Allow-Credentials', true);
            res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
         }
     });
     if (req.method === 'OPTIONS') {
        res.status(200);
     } else {
        next();
     }
}