Express.js CORS 配置，PUT 不起作用？答案

【问题标题】：Express.js CORS configuration, PUT does not work?Express.js CORS 配置，PUT 不起作用？
【发布时间】：2020-06-23 03:36:05
【问题描述】：

我在后端有一个 React 应用程序和 Nodejs(Express)。部署到主机服务器后，我为更新某些文档所做的功能无法正常工作。它给出了 CORS 错误：

我在 server.js 中有这行代码来处理 CORS 策略：

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

GET 和 POST 方法都可以，但是 PUT 方法不行（不知道 Delete 有没有试过）

我在这个问题上花了很多时间；试过这个：https://stackoverflow.com/a/42463858/11896129

在网上找了一堆解决方案，尝试从 IIS web.config 文件配置它，没有解决我的问题。我可能会错过哪一部分？

【问题讨论】：

related
您是否尝试过使用cors nodeJS 模块？它可能会为您完成这项工作。
我在后端有一个 React 应用程序和 Nodejs(Express) - 解决 CORS 问题的最佳方法是通过从后端服务器提供 React 脚本包来消除它.请参阅 this 项目（我是作者）并在自述文件中搜索 CORS。
目前没有SSR。回到 CORS，React 应用程序构建的结果是文件：.html 页面、.js 带有 React 代码的脚本包和可选的.map 文件。所有这些文件都称为构建工件。如果您让 Express 提供构建工件，那么客户端的浏览器会从单个后端服务器获取所有内容（构建工件和 API 响应）。这为 CORS 留下了空间。因此不需要 CORS 标头和发送这些标头的包。
尝试禁用所有扩展，和/或尝试在隐身窗口中。并尝试清除该站点的 cookie 和浏览器缓存。并禁用您已安装的任何防病毒软件。并从不同的浏览器、不同的机器和不同的网络尝试。关键是要消除一些其他正在运行的软件或您的机器可能会干扰请求的可能性，并消除某些防火墙设置干扰的可能性等。

标签： javascript node.js express error-handling cors

【解决方案1】：

如MDN:所述

此外，对于可能对服务器数据造成副作用的 HTTP 请求方法（特别是对于 GET 以外的 HTTP 方法，或者对于某些 MIME 类型的 POST 使用），规范要求浏览器“预检”请求，使用 HTTP OPTIONS 请求方法从服务器请求支持的方法，然后在服务器“批准”后，使用实际的 HTTP 请求方法发送实际请求。

所以你必须回答预检请求：

  app.options("*", (req, res) => {
    res.status(200).send("Preflight request allowed");
  });

阅读有关预检请求的更多信息here。

【讨论】：

@Jonas cors 包是否默认添加 options？因为我有一个服务于 PUT 请求的快速服务器，我没有添加任何 options 只处理 cors 包。
@ChristosLytras 是的，确实如此，如您所见in the sourcecode
您能否显示您为express 服务器注册中间件的顺序？这些选项和您使用的 CORs 标头看起来不错。

【解决方案2】：

这应该可以，我使用了这个 CORS 配置

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

    next();
  });

【讨论】：

不，不工作。我已经尝试了很多这些变体，没有用
您是否使用“Access-Control-Allow-Origin”、“*”进行测试
是的，我也这样做了。 POST 和 GET 都可以，PUT 不起作用
你在使用 Nginx 吗？如果是，那么也使用此配置。
app.use(function(req,res,next){ res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Methods", "GET, PUT, POST, DELETE, PATCH"); res.header("Access-Control-Allow-Headers", "Accept, Content-Type, Authorization, X-Requested-With"); next(); });

【解决方案3】：

您看到的错误 No 'Access-Control-Allow-Origin' header is present 很可能来自预检 OPTIONS 请求，很可能甚至没有到达您的 express 后端，而是由前端的网络服务器处理。

要么安排 OPTIONS 请求也被转发到您的 web 服务器配置中的 express 后端，要么指示 web 服务器使用所需的标头对其进行响应。

检查这些：

https://support.plesk.com/hc/en-us/articles/115001338265-How-to-set-up-CORS-cross-origin-resource-sharing-in-Plesk-for-Linux-

https://support.plesk.com/hc/en-us/articles/360005431913-Is-it-possible-to-enable-CORS-cross-origin-resource-sharing-on-Plesk-for-Windows

https://talk.plesk.com/threads/iis-cors-configuration-problem-for-node-js-backend.355677/

【讨论】：

【解决方案4】：

您可以在项目中使用 npm package cors (https://www.npmjs.com/package/cors)。安装它，然后将其配置为中间件。并将其放在您的应用程序路由之前。

 const cors = require("cors");

    const corsOptions = {   origin: "*",   methods:
    "GET,HEAD,PUT,PATCH,POST,DELETE",   allowedHeaders:
        "Access-Control-Allow-Headers,Access-Control-Allow-Origin,Access-Control-Request-Method,Access-Control-Request-Headers,Origin,Cache-Control,Content-Type,X-Token,X-Refresh-Token",   credentials: true,   preflightContinue: false,  
    optionsSuccessStatus: 204 };

    app.use(cors(corsOptions));

【讨论】：

Oner 兄弟，我在我的项目中使用的是相同的，它正在工作。
我明白，但它在我的身上不起作用。我尝试了这些 cors 包的许多变体，也通过手动设置标头等来做到这一点。应该有另一种方法，因为在后端，我有路由和身份验证中间件，就像任何其他常用应用程序一样，没有什么特别但仍然没有工作。我也可以共享整个 app.js 和路由

【解决方案5】：

请尝试以下配置

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

请告诉我是否适合您。

有关更多信息，请参阅 Github 存储库：https://github.com/expressjs/cors

【讨论】：

【解决方案6】：

我们也可以使用 npm 包来启用它

npm install --save cors

打包好后，作为中间件使用如下。

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

如果您需要将资源访问限制在单个应用程序中，可以按照以下方式完成

app.use(cors({
  origin: 'http://yourapp.com'
}));

如果您需要添加对多个应用程序的访问权限，可以按如下方式完成

var allowedOrigins = ['http://localhost:3000',
                      'http://yourapp.com'];
app.use(cors({
  origin: function(origin, callback){
    // allow requests with no origin 
    // (like mobile apps or curl requests)
    if(!origin) return callback(null, true);
    if(allowedOrigins.indexOf(origin) === -1){
      var msg = 'The CORS policy for this site does not ' +
                'allow access from the specified Origin.';
      return callback(new Error(msg), false);
    }
    return callback(null, true);
  }
}));

【讨论】：

【解决方案7】：

您是否编写了在处理 PUT 请求的代码行之前附加标头的中间件？我有一个类似的代码，但它对我有用。另一种方法是使用 npm 'cors' 模块。

出于测试目的，您可以附加以下测试（您可以稍后附加特定的标头/方法）：

res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', '*');
res.header('Access-Control-Allow-Methods', '*');

【讨论】：