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

【问题标题】：Why do I get error net::ERR_CONNECTION_REFUSED with JSON Server POST request?为什么我在 JSON 服务器 POST 请求中收到错误 net::ERR_CONNECTION_REFUSED？
【发布时间】：2021-08-23 14:38:03
【问题描述】：

解决方案：请参阅下面的 Hassan Imam 的评论。

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

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

我遇到了以下 CORS 问题：

铬：

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).

启动服务器：

npm run server

App.js：

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

package.json

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "server": "json-server --watch db.json --port 5000"
  },

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

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

【问题讨论】：

不应该是http://localhost:5000/tasks而不是http://localhost/5000/tasks吗？
请edit您的帖子标题。除了重复标签中已有的信息并添加“问题”一词之外，您什么也没做。您的标题应该解释您遇到的问题或您提出的问题，以对正在扫描搜索结果列表以寻找问题解决方案的未来网站读者有用的方式。您当前的标题不这样做。
@HassanImam 你是对的。不敢相信我错过了那个错字。发布一个答案，以便我接受并获得信用？
@KenWhite 帖子标题已编辑

标签： javascript reactjs fetch json-server connection-refused

【解决方案1】：

Chrome 浏览器阻止跨域请求。进而点击OPTIONS 请求，这些请求在跨域资源共享 (CORS) 中也称为飞行前请求。

Chrome 浏览器发出此飞行前请求是一种安全措施，以确保正在完成的请求受到服务器的信任。这意味着服务器知道在请求中发送的方法、来源和标头是安全的。

您可以通过添加--no-cors 阅读更多here 来处理此问题

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

【讨论】：