为什么我在 JSON 服务器 POST 请求中收到错误 net::ERR_CONNECTION_REFUSED？

问题描述

解决方案：请参阅下面哈桑·伊玛目的评论。

我在 http://localhost:3000/ 上运行了一个 React 项目，在 http://localhost:5000/tasks 上运行了我的 JSON 服务器。

我可以从服务器删除任务（db.json 上的数据被删除）而不会出错，但是当我尝试使用 POST 方法添加任务时，我在 chrome 和 firefox 中遇到 CORS 错误。

我遇到了以下 CORS 问题：

铬：

public

火狐：

POST http://localhost/5000/tasks net::ERR_CONNECTION_REFUSED

启动服务器：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost/5000/tasks. (Reason: CORS request did not succeed).

App.js：

npm run server

package.json

const addTask = async (task) => {
    const res = await fetch('http://localhost/5000/tasks',{
      method: 'POST',headers: {
        'Content-type': 'application/json',},body: JSON.stringify(task),});

    const data = await res.json();

    setTasks([...tasks,data]);
    
  };

我尝试将 'Access-Control-Allow-Origin': '*',添加到标题中，但仍然遇到相同的错误。

有人有想法吗？我应该在 fetch 中向标头添加一些内容还是通过命令行以某种方式配置 JSON 服务器？

解决方法

Chrome 浏览器会阻止跨域请求。并依次命中 OPTIONS 请求，这些请求在跨域资源共享 (CORS) 中也称为飞行前请求。

此预检请求是由 chrome 浏览器发出的，作为一项安全措施，以确保正在执行的请求受到服务器的信任。这意味着服务器了解在请求上发送的方法、来源和标头是安全的。

您可以通过添加--no-cors阅读更多内容here

来处理此问题

"server": "json-server --watch db.json --port 5000 --no-cors"