为什么将 CORS 标头添加到 OPTIONS 路由不允许浏览器访问我的 API？

尝试将控制权传递给下一个匹配的路由。如果 Express 首先匹配 app.get 路由，则除非您这样做，否则它不会继续进入选项路由（注意使用 next）：

app.get('somethingelse', (req, res, next) => {
  //..set headers etc.
        
  next();
});

在组织 CORS 内容方面，我把它放在一个对我来说效果很好的中间件中：

// CORS middleware
const allowCrossDomain = (req, res, next) => {
  res.header(`Access-Control-Allow-Origin`, `example.com`);
  res.header(`Access-Control-Allow-Methods`, `GET,PUT,POST,DELETE`);
  res.header(`Access-Control-Allow-Headers`, `Content-Type`);
  next();
};

//...

app.configure(() => {
  app.use(express.bodyParser());
  app.use(express.cookieParser());
  app.use(express.session({ secret: `cool beans` }));
  app.use(express.methodOverride());
  // CORS middleware
  app.use(allowCrossDomain);
  app.use(app.router);
  app.use(express.static(`public`));
});

为了回答您的主要问题，如果 POST 或 GET 中包含任何非简单的内容或标头，则 CORS 规范仅要求在 POST 或 GET 之前进行 OPTIONS 调用。

需要 CORS 预检请求（OPTIONS 调用）的 Content-Type 是除以下类型之外的任何 Content-Type：

1. application/x-www-form-urlencoded
2. multipart/form-data
3. text/plain

除上面列出的内容类型外，任何其他内容类型都将触发预检请求。

对于 Headers，除以下情况外，任何 Request Header 都将触发预检请求：

1. Accept
2. Accept-Language
3. Content-Language
4. Content-Type
5. DPR
6. Save-Data
7. Viewport-Width
8. Width

任何其他请求标头都将触发预检请求。

因此，您可以添加一个自定义标头，例如： ，这应该会触发预检请求并命中 OPTIONS 块。x-Trigger: CORS

请参阅 MDN Web API 参考 - CORS 预检请求

保持相同的路由理念。我使用这段代码：

app.all('/*', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  next();
});

与 http://enable-cors.org/server_expressjs.html 示例相似

我做了一个更完整的中间件，适合express或connect。它支持印前检查请求。请注意，它将允许 CORS 访问任何内容，如果您想限制访问，您可能需要进行一些检查。OPTIONS

app.use(function(req, res, next) {
    var oneof = false;
    if(req.headers.origin) {
        res.header('Access-Control-Allow-Origin', req.headers.origin);
        oneof = true;
    }
    if(req.headers['access-control-request-method']) {
        res.header('Access-Control-Allow-Methods', req.headers['access-control-request-method']);
        oneof = true;
    }
    if(req.headers['access-control-request-headers']) {
        res.header('Access-Control-Allow-Headers', req.headers['access-control-request-headers']);
        oneof = true;
    }
    if(oneof) {
        res.header('Access-Control-Max-Age', 60 * 60 * 24 * 365);
    }

    // intercept OPTIONS method
    if (oneof && req.method == 'OPTIONS') {
        res.send(200);
    }
    else {
        next();
    }
});

我发现最简单的方法是使用 node.js 包 cors。最简单的用法是：

var cors = require('cors')

var app = express()
app.use(cors())

当然，有很多方法可以根据您的需要配置行为;上面链接的页面显示了许多示例。

我对Express 4.2.0最简单的解决方案（编辑：似乎在4.3.0中不起作用）是：

function supportCrossOriginScript(req, res, next) {
    res.status(200);
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Content-Type");

    // res.header("Access-Control-Allow-Headers", "Origin");
    // res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    // res.header("Access-Control-Allow-Methods","POST, OPTIONS");
    // res.header("Access-Control-Allow-Methods","POST, GET, OPTIONS, DELETE, PUT, HEAD");
    // res.header("Access-Control-Max-Age","1728000");
    next();
}

// Support CORS
app.options('/result', supportCrossOriginScript);

app.post('/result', supportCrossOriginScript, function(req, res) {
    res.send('received');
    // do stuff with req
});

我想这样做也会起作用......app.all('/result', ...)

测试是在不同的端口中运行的 express + node + ionic 完成的。

Localhost:8100

Localhost:5000

// CORS (Cross-Origin Resource Sharing) headers to support Cross-site HTTP requests

app.all('*', function(req, res, next) {
       res.header("Access-Control-Allow-Origin", "*");
       res.header("Access-Control-Allow-Headers", "X-Requested-With");
       res.header('Access-Control-Allow-Headers', 'Content-Type');
       next();
});

这对我有用，因为它在路由中很容易实现，我使用 meanjs 并且它工作正常，safari、chrome 等。

app.route('/footer-contact-form').post(emailer.sendFooterMail).options(function(req,res,next){ 
        res.header('Access-Control-Allow-Origin', '*'); 
        res.header('Access-Control-Allow-Methods', 'GET, POST');
        res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
        return res.send(200);

    });

执行以下操作：

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

我发现使用 npm 请求包 （https://www.npmjs.com/package/request 来做到这一点非常容易)

然后我根据这篇文章 http://blog.javascripting.com/2015/01/17/dont-hassle-with-cors/

'use strict'

const express = require('express');
const request = require('request');

let proxyConfig = {
    url : {
        base: 'http://servertoreach.com?id=',
    }
}

/* setting up and configuring node express server for the application */
let server = express();
server.set('port', 3000);


/* methods forwarded to the servertoreach proxy  */
server.use('/somethingElse', function(req, res)
{
    let url = proxyConfig.url.base + req.query.id;
    req.pipe(request(url)).pipe(res);
});


/* start the server */
server.listen(server.get('port'), function() {
    console.log('express server with a proxy listening on port ' + server.get('port'));
});

我们可以避免 CORS 并将请求转发到其他服务器：

// config:
var public_folder = __dirname + '/public'
var apiServerHost = 'http://other.server'

// code:
console.log("starting server...");

var express = require('express');
var app = express();
var request = require('request');

// serve static files
app.use(express.static(public_folder));

// if not found, serve from another server
app.use(function(req, res) {
    var url = apiServerHost + req.url;
    req.pipe(request(url)).pipe(res);
});

app.listen(80, function(){
    console.log("server ready");
});

安装 ExpressJS 的 CORS 模块。您可以按照以下步骤操作>

安装

npm install cors

简单用法（启用所有 CORS 请求）

var express = require('express');
var cors = require('cors');
var app = express();
app.use(cors());

有关更多详细信息，请访问 https://github.com/expressjs/cors

做

npm install cors --save

只需将这些行添加到您的请求所在的主文件中（将其保留在任何路由之前）。

const cors = require('cors');
const express = require('express');
let app = express();
app.use(cors());
app.options('*', cors());

前段时间，我遇到了这个问题，所以我这样做是为了在我的 nodejs 应用程序中允许 CORS：

首先，您需要使用以下命令进行安装：cors

npm install cors --save

现在，将以下代码添加到应用启动文件中，例如 （app.js or server.js)

var express = require('express');
var app = express();

var cors = require('cors');
var bodyParser = require('body-parser');

//enables cors
app.use(cors({
  'allowedHeaders': ['sessionId', 'Content-Type'],
  'exposedHeaders': ['sessionId'],
  'origin': '*',
  'methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
  'preflightContinue': false
}));

require('./router/index')(app);

首先，只需在项目中安装 CORS。 将终端（命令提示符）带到您的项目目录并运行以下命令：cd

npm install cors --save

然后获取服务器.js文件并更改代码以在其中添加以下内容：

var cors = require('cors');


var app = express();

app.use(cors());

app.use(function(req, res, next) {
   res.header("Access-Control-Allow-Origin", "*");
   res.header('Access-Control-Allow-Methods', 'DELETE, PUT, GET, POST');
   res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
   next();
});

这对我有用..

如果要使其特定于控制器，可以使用：

res.setHeader("X-Frame-Options", "ALLOWALL");
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader("Access-Control-Allow-Methods", "POST, GET");
res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

请注意，这也将允许 iframe。

我对我的 Web 应用程序使用了以下步骤，并取得了成功：

将 cors 包添加到 express：

npm install cors --save

在 bodyParser 配置后添加以下行。我在 bodyParser 之前添加时遇到了一些麻烦：

 // enable cors to the server
const corsOpt = {
    origin: process.env.CORS_ALLOW_ORIGIN || '*', // this work well to configure origin url in the server
    methods: ['GET', 'PUT', 'POST', 'DELETE', 'OPTIONS'], // to works well with web app, OPTIONS is required
    allowedHeaders: ['Content-Type', 'Authorization'] // allow json and token in the headers
};
app.use(cors(corsOpt)); // cors for all the routes of the application
app.options('*', cors(corsOpt)); // automatic cors gen for HTTP verbs in all routes, This can be redundant but I kept to be sure that will always work.

在打字稿中，如果要使用 node.js 包 cors

/**
* app.ts
* If you use the cors library
*/

import * as express from "express";
[...]
import * as cors from 'cors';

class App {
   public express: express.Application;

   constructor() {
       this.express = express();
       [..]
       this.handleCORSErrors();
   }

   private handleCORSErrors(): any {
       const corsOptions: cors.CorsOptions = {
           origin: 'http://example.com',
           optionsSuccessStatus: 200
       };
       this.express.use(cors(corsOptions));
   }
}

export default new App().express;

如果不想使用第三方库进行 cors 错误处理，则需要更改 handleCORSErrors（） 方法。

/**
* app.ts
* If you do not use the cors library
*/

import * as express from "express";
[...]

class App {
   public express: express.Application;

   constructor() {
       this.express = express();
       [..]
       this.handleCORSErrors();
   }

   private handleCORSErrors(): any {
       this.express.use((req, res, next) => {
           res.header("Access-Control-Allow-Origin", "*");
           res.header(
               "Access-Control-ALlow-Headers",
               "Origin, X-Requested-With, Content-Type, Accept, Authorization"
           );
           if (req.method === "OPTIONS") {
               res.header(
                   "Access-Control-Allow-Methods",
                   "PUT, POST, PATCH, GET, DELETE"
               );
               return res.status(200).json({});
           } 
           next(); // send the request to the next middleware
       });
    }
}

export default new App().express;

用于使用 app.ts 文件

/**
* server.ts
*/
import * as http from "http";
import app from "./app";

const server: http.Server = http.createServer(app);

const PORT: any = process.env.PORT || 3000;
server.listen(PORT);

使用 Express Middleware 对我来说效果很好。如果您已经在使用 Express，只需添加以下中间件规则即可。它应该开始工作。

app.all("/api/*", function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Cache-Control, Pragma, Origin, Authorization, Content-Type, X-Requested-With");
  res.header("Access-Control-Allow-Methods", "GET, PUT, POST");
  return next();
});

app.all("/api/*", function(req, res, next) {
  if (req.method.toLowerCase() !== "options") {
    return next();
  }
  return res.send(204);
});

参考

可以参考下面的代码。资料来源： Academind/node-restful-api

const express = require('express');
const app = express();

//acts as a middleware
//to handle CORS Errors
app.use((req, res, next) => { //doesn't send response just adjusts it
    res.header("Access-Control-Allow-Origin", "*") //* to give access to any origin
    res.header(
        "Access-Control-Allow-Headers",
        "Origin, X-Requested-With, Content-Type, Accept, Authorization" //to give access to all the headers provided
    );
    if(req.method === 'OPTIONS'){
        res.header('Access-Control-Allow-Methods', 'PUT, POST, PATCH, DELETE, GET'); //to give access to all the methods provided
        return res.status(200).json({});
    }
    next(); //so that other routes can take over
})

下面的代码将起作用，但首先通过以下方式安装 cors：

npm install --save cors

然后：

module.exports = function(app) { 
var express = require("express");
var cors = require('cors');
var router = express.Router();
app.use(cors());

app.post("/movies",cors(), function(req, res) { 
res.send("test");
});

这类似于 Pat 的答案，不同之处在于我以 res.sendStatus（200） 结束;而不是 next（）;

该代码将捕获方法类型 OPTIONS 的所有请求，并发回 access-control-headers。

app.options('/*', (req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');
    res.sendStatus(200);
});

该代码按照问题中的请求接受来自所有源的 CORS。但是，最好将 * 替换为特定来源，即 http://localhost:8080 以防止误用。

由于我们使用 app.options-method 而不是 app.use-method，因此我们不需要进行以下检查：

req.method === 'OPTIONS'

我们可以在其他一些答案中看到这一点。

我在这里找到了答案：http://johnzhang.io/options-request-in-express。

使用没有快速/外部库的 nodejs，我在服务器.js文件中使用了以下方法。这里的关键部分是从请求标头中获取源，然后在服务器响应中允许它，此时我们可以设置将返回的标头，包括如果找到匹配项，则允许的源。

    **const origin = req.headers.origin;**

      let decoder = new StringDecoder('utf-8');
      let buffer = '';
      req.on('data', function (data) {
        buffer += decoder.write(data);
      });
      req.on('end', function () {
        buffer += decoder.end();

        let chosenHandler = typeof (server.router[trimmedPath]) !== 'undefined' ? server.router[trimmedPath] : handlers.notFound;

const data = { ....data object vars}

// should be wrapped in try catch block
      chosenHandler(data, function (statusCode, payload, contentType) {
        server.processHandlerResponse(res, method, trimmedPath, statusCode, payload, contentType, **origin**);


server.processHandlerResponse = function (res, method, trimmedPath, statusCode, payload, contentType, origin) {
  contentType = typeof (contentType) == 'string' ? contentType : 'json';

  statusCode = typeof (statusCode) == 'number' ? statusCode : 200;

  let payloadString = '';
  if (contentType == 'json') {
    res.setHeader('Content-Type', 'application/json');

    const allowedOrigins = ['https://www.domain1.com', 'https://someotherdomain','https://yetanotherdomain',
    ...// as many as you need
  ];
    **if (allowedOrigins.indexOf(origin) > -1) {
        res.setHeader('Access-Control-Allow-Origin', origin);
    }**
    payload = typeof (payload) == 'object' ? payload : {};
    payloadString = JSON.stringify(payload);
  }

... //  if (other content type) ...rinse and repeat..

下面对我有用，希望它对某人有所帮助！

const express = require('express');
const cors = require('cors');
let app = express();

app.use(cors({ origin: true }));

从 https://expressjs.com/en/resources/middleware/cors.html#configuring-cors 那里得到了参考

最简单的方法是使用以下方法在项目中安装 cors 模块：

npm i --save cors

然后，在服务器文件中，使用以下命令导入它：

import cors from 'cors';

然后简单地将它用作中间件，如下所示：

app.use(cors());

希望这有帮助！

在我的中，我补充道：index.js

app.use((req, res, next) => {
   res.header("Access-Control-Allow-Origin", "*");
   res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
   res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
   next();
}) 

如果我是你@OP我会改变我的编程范式。

假设您因为向 localhost 或类似内容发出请求而被阻止这些 CORS。

最终，如果您要部署到生产中的光电，例如 or 或 ，则不必担心 CORS，例如允许源或生产中的其他内容。Google Cloud PlatformHeroku

因此，在测试服务器时，只需使用，您就不会被 CORS 阻止，然后部署您的服务器，然后在您的客户端上工作。postman

你可以使用 Express 中间件，阻止你的域名和方法。

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", process.env.DOMAIN); // update to match the domain you will make the request from
  res.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE");
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  next();
});

最简单的答案是只使用 cors 包。

const cors = require('cors');

const app = require('express')();
app.use(cors());

这将全面启用 CORS。如果你想学习如何在没有外部模块的情况下启用CORS，你真正需要的只是一些设置“Access-Control-Allow-Origin”标头的Express中间件。这是允许从浏览器到服务器的交叉请求域所需的最低要求。

app.options('*', (req, res) => {
  res.set('Access-Control-Allow-Origin', '*');
  res.send('ok');
});

app.use((req, res) => {
  res.set('Access-Control-Allow-Origin', '*');
});

/*首先，这可能是像我这样的初级开发人员的问题：确保在获取方法中使用“lambda”>>>>“'”而不是“'”！*/

''' const response = await fetch（https://api....);

/另外，强烈推荐以下文章： https://developer.edamam.com/api/faq/

简单就是困难：

 let my_data = []
const promise = new Promise(async function (resolve, reject) {
    axios.post('https://cors-anywhere.herokuapp.com/https://maps.googleapis.com/maps/api/directions/json?origin=33.69057660000001,72.9782724&destination=33.691478,%2072.978594&key=AIzaSyApzbs5QDJOnEObdSBN_Cmln5ZWxx323vA'
        , { 'Origin': 'https://localhost:3000' })
        .then(function (response) {
            console.log(`axios response ${response.data}`)
            const my_data = response.data
            resolve(my_data)
        })
        .catch(function (error) {
            console.log(error)
            alert('connection error')
        })
})
promise.then(data => {
    console.log(JSON.stringify(data))
})

在主 js 文件中试试这个：

app.use((req, res, next) => {
res.header("Access-Control-Allow-Origin", "*");
res.header(
  "Access-Control-Allow-Headers",
  "Authorization, X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Allow-Request-Method"
);
res.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, DELETE");
res.header("Allow", "GET, POST, OPTIONS, PUT, DELETE");
next();
});

这应该可以解决您的问题

使用包。并输入以下参数：CORS

cors({credentials: true, origin: true, exposedHeaders: '*'})

如果你想让 CORS 在没有 cors NPM 包的情况下工作（为了纯粹的学习乐趣！），你绝对可以自己处理 OPTIONS 调用。以下是对我有用的东西：

app.options('*', (req, res) => {
    res.writeHead(200, '', {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'OPTIONS',
    }).end();
});

很好，很简单，对吧？请注意使用 res.writeHead（） 而不是我不熟悉的 res.header（）。

cors软件包是解决 express.js 中 CORS 策略问题的推荐方法，但您还需要确保也启用它，如下所示：app.options

const cors = require('cors');

// enable cors
app.use(
  cors({
    origin: true,
    optionsSuccessStatus: 200,
    credentials: true,
  })
);
app.options(
  '*',
  cors({
    origin: true,
    optionsSuccessStatus: 200,
    credentials: true,
  })
);

如果您的 Express Server 启用了授权，您可以像这样实现

const express = require('express');
const app=express();
const cors=require("cors");
app.use(cors({
   credentials: true, // for authorization
}));
...

2023 年，随着 reactstrap “npm run start” 在 3000 和 nodejs express 服务器在 3001 中，服务器 .js 中的以下内容在所有其他路由之前工作：

app.use(function (req, res, next) {
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Headers", "Access-Control-Allow-Origin");
    res.header("Access-Control-Allow-Origin", "*"); // update to match the domain you will make the request from
    next();
});