為什么我收到錯誤 net::ERR_CONNECTION_REFUSED 與 JSON 服務器 POST 請求？

Question

決議：見下面哈桑伊瑪目的評論。

我有一個 React 項目在 http://localhost:3000/ 上運行，我的 JSON 服務器在 http://localhost:5000/tasks 上運行。

我可以從服務器上刪除一個任務（db.json 上的數據被刪除）沒有錯誤但是當我嘗試使用 POST add.

我遇到了以下 CORS 問題：

鉻合金：

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

Firefox：

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

應用程序.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': '*', 添加到 header 但仍然遇到相同的錯誤。

有人有想法嗎？ 我是否應該在 fetch 中添加一些內容或以某種方式通過命令行配置 JSON 服務器？

Answer 1

Chrome 瀏覽器會阻止跨域請求。 進而命中OPTIONS請求，這些請求在跨域資源共享 (CORS) 中也稱為飛行前請求。

這個飛行前請求是由 chrome 瀏覽器發出的，作為一種安全措施，以確保正在完成的請求受到服務器的信任。 這意味着服務器知道在請求上發送的方法、來源和標頭是安全的。

有不同的方法可以通過添加--no-cors來處理這個問題在這里閱讀更多

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