使用我的 node/express rest api 服务器获取数据时 CORS 被阻止

Posted 2023-03-04

【中文标题】使用我的 node/express rest api 服务器获取数据时 CORS 被阻止

【英文标题】：CORS blocked while fetching data using my node/express rest api server

【发布时间】：2020-01-15 14:54:19

【问题描述】：

我有一个正在运行的 localhost 节点/express 服务器，它应该允许任何带有一些正文的 post 请求，然后返回带有一些消息的相同正文。我已将 cors 节点包 用于我的 express 中间件以允许 CORS。

但是我在这里遇到了一个问题，我可以轻松地在系统内使用来自 POSTMAN 应用程序的发布请求并获取输出，但是当我尝试从其他域（例如 codepen、jsfiddle）获取请求时，即使我已在我的节点服务器中允许跨源资源共享，我仍然收到 CORS 被阻止响应。

这是我所做的：

在我的服务器端 express 应用中：

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();
app.use(cors(
  origin: "*",  //also tried: origin: "https://codepen.io"
  methods: "GET, POST, PUT, DELETE",
  allowedHeaders: 'Content-Type, Authorization'
));

app.use(bodyParser.urlencoded( extended: false ));
app.use(bodyParser.json());  // application/json

app.post('/post', (req, res, next) => 
    const title = req.body.title;
    const id = req.body.id;

    res.status(201).json(
        message: "POST request successful",
        resBody: 
            title: title,
            id: id
        
    )
);

app.listen(4001);

对于我的客户端 javascript 获取代码：

const options = 
  method: 'POST',
  body: JSON.stringify(
    title: 'foo',
    id: 1
  ),
  headers: 
    'Content-Type': 'application/json'
  
;

fetch('http://localhost:4001/post', options)
  .then((response) => 
    return response.json();
  )
  .then((jsonObject) => 
  console.log(jsonObject)
  )
  .catch((error) => 
    console.log(error);
  );

我在控制台中收到此消息：

跨域请求被阻止：同源策略不允许读取位于http://localhost:4001/post 的远程资源。 （原因：CORS 请求未成功）。

我知道这些类型的问题已经回答了太多时间了，但我不明白为什么在允许来自我的服务器的 CORS 后我仍然收到错误。

请有人解释一下。

【问题讨论】：

您没有正确处理预检。非简单请求（例如您的请求，其 contentType 与默认值不同）必须发送预检并且服务器必须对其作出响应。

我必须在哪里处理它们，在服务器端还是在客户端，我该怎么做？你能解释一下吗？

你已经很接近了，你只需要确保 node.js 中的 CORS 配置允许 OPTIONS 请求并正确响应它们。您正在使用的模块的文档应该解释如何。

我也允许服务器进行 OPTIONS 请求，但我仍然遇到同样的错误。它是否与我的客户端代码有关？我不明白为什么会这样。

客户端不需要改。

【参考方案1】：

您是否尝试在没有任何数据的情况下传递 cors？因为我遇到了同样的问题，我只通过传递 app.use(cors) 来修复它 默认情况下它打开任何来源，它根本不安全，但它对我有用

【讨论】：

另外，如果我在我的 fetch 请求中设置请求标头 'Content-Type': 'text/plain' 但我看不到从服务器发送的数据，我的连接正常（201） .我认为问题在于内容类型 application/json。有什么想法吗？