为什么不添加CORS头选项路由允许浏览器访问我的API?

我试图在使用Express.js web框架的Node.js应用程序中支持CORS。我已经阅读了谷歌关于如何处理这个问题的小组讨论，并阅读了一些关于CORS如何工作的文章。首先，我这样做(代码是用CoffeeScript语法写的):

app.options "*", (req, res) ->
  res.header 'Access-Control-Allow-Origin', '*'
  res.header 'Access-Control-Allow-Credentials', true
  # try: 'POST, GET, PUT, DELETE, OPTIONS'
  res.header 'Access-Control-Allow-Methods', 'GET, OPTIONS'
  # try: 'X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept'
  res.header 'Access-Control-Allow-Headers', 'Content-Type'
  # ...

这似乎不管用。似乎我的浏览器(Chrome)没有发送最初的选项请求。当我刚刚更新了块的资源，我需要提交一个跨起源GET请求:

app.get "/somethingelse", (req, res) ->
  # ...
  res.header 'Access-Control-Allow-Origin', '*'
  res.header 'Access-Control-Allow-Credentials', true
  res.header 'Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, OPTIONS'
  res.header 'Access-Control-Allow-Headers', 'Content-Type'
  # ...

它工作(在Chrome)。这也适用于Safari。

我听说……

在实现CORS的浏览器中，每个跨源GET或POST请求之前都有一个OPTIONS请求，用于检查GET或POST是否正常。

所以我的主要问题是，为什么这种情况在我身上没有发生?为什么我的app。options块没有被调用?为什么我需要在我的主app.get块设置标题?

当前回答

如果你想让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()，这一点我不熟悉。

2021-04-11 04:51:05

其他回答

安装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

2016-06-15 20:37:36

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

const cors = require('cors');

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

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

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

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

2019-11-15 15:24:13

我使用以下步骤我的web应用程序，我成功了:

快递添加cors包:

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.

2018-06-14 13:36:07

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

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

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

2020-02-01 11:06:28

为了回答您的主要问题，CORS规范只要求在POST或GET中有任何非简单内容或标头时将OPTIONS调用放在POST或GET之前。

需要CORS飞行前请求(OPTIONS调用)的内容类型是任何内容类型，除了以下内容:

应用程序/ x-www-form-urlencoded 多部分/格式文本/平原

除了上面列出的内容类型外，任何其他内容类型都将触发飞行前请求。

对于header，除了以下以外的任何Request header都会触发一个pre-flight Request:

接受接收语言内容语言内容类型 DPR 保存数据 Viewport-Width 宽度

任何其他请求头将触发预飞行请求。