尝试使用 node.js 连接到 API 时出现 Cors 策略错误答案

【问题标题】：Cors Policy Error when trying to connect to API using node.js尝试使用 node.js 连接到 API 时出现 Cors 策略错误
【发布时间】：2021-09-05 14:08:31
【问题描述】：

我在尝试将我的 React WEB 应用程序连接到我的 Node.js 服务器时遇到一个 cors 策略错误，它们有不同的端点。

我尝试使用 CORS（一个 node.js 包）来提供可用于启用 CORS 的 Connect/Express 中间件，如下所示：

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

var corsOptions = {
  origin:
    'https://idcapex-web-suprimentos-dev.apps.rosa-gerdau.bxnu.p1.openshiftapps.com',
  optionsSuccessStatus: 200 
}

app.get('/', cors(corsOptions), function (req, res, next) {
  res.json({
    msg:
      'This is CORS-enabled for only https://idcapex-web-suprimentos-dev.apps.rosa-gerdau.bxnu.p1.openshiftapps.com.'
  })
})

app.use(express.json({limit: '50mb'}));
app.use(express.urlencoded({limit: '50mb'}));
app.use(express.json())

我也使用 cURL 测试了 CORS，这是我的回应：

$ curl -H "Access-Control-Request-Method: GET" -H "Origin: http://localhost" --head https://idcapex-api-suprimentos-dev.apps.rosa-gerdau.bxnu.p1.openshiftapps.com/
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
  0   119    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0HTTP/1.1 200 OK
x-powered-by: Express
access-control-allow-origin: https://idcapex-web-suprimentos-dev.apps.rosa-gerdau.bxnu.p1.openshiftapps.com
vary: Origin
content-type: application/json; charset=utf-8
content-length: 119
etag: W/"77-AdhBn2OLZD9G030p12/wnx/v9oI"
date: Mon, 21 Jun 2021 22:58:58 GMT
keep-alive: timeout=5
set-cookie: 3445b7ee597b15dbb7cad24a97e79d23=e41350b2903f2a39c85294550a7c8e19; path=/; HttpOnly; Secure; SameSite=None
cache-control: private

我不知道为什么它不起作用，似乎一切正常，但我一直在控制台中收到错误：

Access to XMLHttpRequest at 'https://idcapex-api-suprimentos-dev.apps.rosa-gerdau.bxnu.p1.openshiftapps.com/api/table' from origin 'https://idcapex-web-suprimentos-dev.apps.rosa-gerdau.bxnu.p1.openshiftapps.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Access to XMLHttpRequest at 'https://idcapex-api-suprimentos-dev.apps.rosa-gerdau.bxnu.p1.openshiftapps.com/api/users/create' from origin 'https://idcapex-web-suprimentos-dev.apps.rosa-gerdau.bxnu.p1.openshiftapps.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

【问题讨论】：

服务器和客户端是否在同一主机上？如果是这样，您可能只是将请求作为相对路径发送，如 fetch('/api/whatever') 而不是完整形成的路径。
看起来 cors 中间件不会看到 OPTIONS 预检请求
服务器和客户端不在同一个主机，他们也有不同的端点。

标签： javascript node.js reactjs express cors

【解决方案1】：

错误说没有 Access-Control-Allow-Origin，我认为您应该在发送请求时添加此标头

Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: <origin>
Access-Control-Allow-Origin: null

以上是语法

【讨论】：

我试过了，使用 axios 请求如下： const api = axios.create({ headers: { 'Access-Control-Allow-Origin': '*', }, baseURL: 'idcapex-api-suprimentos-dev.apps.rosa-gerdau.bxnu.p1.openshifta… ' }) 但我遇到了同样的错误：ik.imagekit.io/fx09rzyx3a4/Capturar_B-rKzhLqsMB.PNG

【解决方案2】：

const corsOptions = {
   origin: 'URL', 
   methods: ['GET', 'POST', 'DELETE', 'PUT'],
   credentials: true,
   allowedHeaders: ['Content-Type']
}
app.use(cors(corsOptions));

尝试包含方法

【讨论】：

我试过了，没用，同样的错误：ik.imagekit.io/fx09rzyx3a4/Capturar_B-rKzhLqsMB.PNG

【解决方案3】：

我发现出了什么问题，与 CORS 相关，我的代码没问题。我不是 MongoDB 数据库的 root 管理员，所以我不能做任何操作，改变了它，之后一切都很好。

【讨论】：