CORS相关问题，我无法继续进行POST请求。

15 浏览
0 Comments

CORS相关问题，我无法继续进行POST请求。

我在尝试让我的后端和前端相互通信时遇到了一些问题（reactjs +原始的NODEjs），它们分别在不同的localhost端口上（4000和3000）。

我设法让它工作，直到我想尝试将数据添加到我的数据库中为止。

我可以使用我的react应用程序获取数据，但无法POST任何数据。

以下是两个方面的代码：

前端：

`

const sendData = async (event: any): Promise => {
    console.log("hello");
    event.preventDefault();
    const response = await fetch(`${_DATA_URL_}`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(employeeForm),
    });
    const data = await response.json();
    console.log(data);
  };

`

后端：

const Router = (req, res) => {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader(
    "Access-Control-Allow-Headers",
    "Content-Type, Accept, Origin, Authorization"
  );
  res.setHeader(
    "Access-Control-Allow-Methods",
    "GET, POST, PUT, DELETE, PATCH, OPTIONS"
  );
  console.log("hello"); //debug
  if (req.method === "GET") {
    if (req.url === "/api/employees") {
      getEmployees(req, res);
    } else if (req.url.match(/\/api\/employees\/(\w{4}-?){3}/)) {
      const requestID = req.url.split("/")[3];
      getEmployee(req, res, requestID);
    } else {
      res.statusCode = 404;
      res.setHeader("Content-Type", "application/json");
      res.end(JSON.stringify({ message: `Error : ${req.url} not found !` }));
    }
  }
  if (req.method === "POST") {
    if (req.url === "/api/employees") {
      createEmployee(req, res);
    } else {
      res.setHeader("Content-Type", "application/json");
      res.end(JSON.stringify({ message: `Error : ${req.url} not found !` }));
    }
  }
  if (req.method === "DELETE") {
    if (req.url.match(/\/api\/employees\/(\w{4}-?){3}/)) {
      const requestID = req.url.split("/")[3];
      deleteEmployee(req, res, requestID);
    } else {
      res.statusCode = 404;
      res.setHeader("Content-Type", "application/json");
      res.end(JSON.stringify({ message: `Error : ${req.url} not found !` }));
    }
  }
  if (req.method === "PUT") {
    if (req.url.match(/\/api\/employees\/(\w{4}-?){3}/)) {
      const requestID = req.url.split("/")[3];
      updateEmployee(req, res, requestID);
    } else {
      res.statusCode = 404;
      res.setHeader("Content-Type", "application/json");
      res.end(JSON.stringify({ message: `Error : ${req.url} not found !` }));
    }
  }
};

我很确定这是来自react端的问题，因为当我在POSTMAN中使用POST数据时，它工作正常，而在localhost上一段时间后，我在控制台中收到此错误：

enter image description here

也许我在错误地使用cors，无论如何，感谢您未来的答案。

0

1 答案

0 Comments

CORS相关问题，无法继续进行POST请求的原因和解决方法

在开发过程中，有时候我们可能会遇到CORS（跨域资源共享）相关的问题，无法继续进行POST请求。下面我们来整理一下出现这个问题的原因以及解决方法。

在这个问题中，提供了两个链接，一个是法语的链接，另一个是stackoverflow上的链接。我们可以先点击法语链接查看详细解释。

根据法语链接的解释，浏览器发送OPTIONS请求的原因是因为在进行跨域请求时，浏览器会首先发送一个预检请求（preflight request）来确认服务器是否支持跨域请求。预检请求使用的是OPTIONS方法。如果服务器返回的响应中没有包含必要的CORS头部信息，浏览器会拒绝发送实际的POST请求。

解决这个问题的方法是在服务器端添加CORS头部信息，以允许跨域请求。具体的实现方法可以参考stackoverflow上的链接。

根据stackoverflow链接上的回答，可以使用Node.js中的cors模块来解决这个问题。cors模块可以在服务器端设置合适的CORS头部信息，以允许跨域请求。

具体的代码实现如下：

const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
// 在这里添加其他的路由和处理逻辑
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

以上是使用Node.js和express框架的示例代码。通过引入cors模块并在app中使用它，可以很方便地设置CORS头部信息，从而解决跨域请求的问题。

总结起来，当遇到CORS相关的问题，无法继续进行POST请求时，我们需要在服务器端添加合适的CORS头部信息，以允许跨域请求。使用Node.js中的cors模块可以很方便地实现这一点。希望以上内容能对您有所帮助！

0