Javascript Express.js CORS配置，PUT不工作？

我有一个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是否起作用）

我在这个问题上花了很多时间；我试过这个：

在网上寻找了一堆解决方案，试图从IIS web.config文件中进行配置，但没有解决我的问题。我可以错过哪一部分？

如上所述

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

所以你必须回答飞行前的请求：

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

---

阅读更多关于飞行前请求的信息。

这应该可以，我使用了这个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();
  });

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

---

您可以在项目中使用npm包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));

---

最有可能出现的错误是您看到的来自飞行前选项请求的“Access Control Allow Origin”（访问控制允许原点）标题

No'Access Control Allow Origin（无访问控制允许原点）

，该请求很可能甚至没有到达您的express后端，但正由前端的Web服务器处理

在Web服务器配置中，安排选项请求也中继到express后端，或者指示Web服务器使用所需的头响应它

检查以下各项：

---

请尝试以下配置

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

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

请让我知道是否适合你

---

有关更多信息，请参阅Github repo:

我们也可以使用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);
  }
}));

---

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

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

---

您是否尝试过使用

cors

nodeJS模块？我有一个React应用程序和后端的Nodejs（Express）——解决CORS问题的最好方法是从后端服务器提供React脚本包，从而消除它。查看项目（我是作者）并在自述中搜索CORS。目前没有SSR。回到CORS，React应用程序构建的结果是文件：

.html

页面、

.js

脚本包以及React代码和可选的

.map

文件。所有这些文件都称为构建工件。如果让Express为构建工件提供服务，那么客户端浏览器将从单个后端服务器获取所有内容（构建工件和API响应）。这给CORS留下了空间。因此，不需要CORS头和发送这些头的包。请尝试禁用所有扩展，和/或在“匿名”窗口中尝试。然后尝试清除该站点的Cookie和浏览器缓存。并禁用您安装的任何防病毒软件。然后从不同的浏览器、不同的机器和不同的网络进行尝试。重点是要消除其他正在运行的软件或您的计算机可能会干扰请求的可能性，并消除某些防火墙设置正在干扰的可能性，等等。不，不工作。我已经尝试了很多不同的版本，没有用你用“访问控制允许源代码”测试，“*”是的，我也做了。POST和GET都可以，PUT不起作用。您使用的是Nginx吗？如果是，则也使用此配置。

app.use（函数（req，res，next）{res.header（“访问控制允许源”，“*”）；res.header（“访问控制允许方法”，“获取，放置，发布，删除，修补”）；res.header（“访问控制允许头”，“接受，内容类型，授权，X-request-With”）；next（）；}）奥纳兄弟，我在我的项目中使用了相同的代码，它正在工作。我理解，但它在我的项目中不起作用。我尝试了这些cors包的很多变体，还手动设置了标题等。应该还有另一种方法，因为在后端，我有路由和身份验证中间件，就像任何其他常用的应用程序一样，没有什么例外，但仍然不起作用。我可以分享整个app.js和路由also@Jonas软件包是否默认添加
选项
？因为我有一个express server，它提供一个
PUT
请求，并且我没有添加任何
选项
来处理
cors
包。@Christolytras是的，它提供了，正如您所看到的，您可以显示您的
express
服务器的中间件注册顺序吗？这些选项和您正在使用的
CORs
标题看起来不错。