Express.js CORS 配置，PUT 不行？

Question

我在后端有一个 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 文件配置它，但没有解决我的问题。 我可能会错过哪个部分？

Answer 1

如MDN 所述：

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

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

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

在此处阅读有关预检请求的更多信息。

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

Answer 3

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

要么安排 OPTIONS 请求也中继到您的网络服务器配置中的快速后端，要么指示网络服务器使用所需的标头对其进行响应。

检查这些：

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/

Answer 4

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

Answer 5

请尝试以下配置

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

请让我知道是否适合您。

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

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

Answer 7

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

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

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