反應：Axios 網絡錯誤

Question

這是我第一次使用axios，遇到了一個錯誤。

  axios.get(
    `http://someurl.com/page1?param1=1&param2=${param2_id}`
  )
  .then(function(response) {
    alert();
  })
  .catch(function(error) {
    console.log(error);
  });

使用正確的 url 和參數，當我檢查網絡請求時，我確實從我的服務器得到了正確的答案，但是當我打開控制台時，我發現它沒有調用回調，而是捕獲了一個錯誤。

錯誤：網絡錯誤堆棧跟蹤：createError@ http://localhost:3000/static/js/bundle.js:2188:15 handleError@ http://localhost:3000/static/js/bundle.js:1717:14

Answer 1

如果使用 NodeJS 創建 API

---

您的 Express 應用程序需要使用 CORS（跨源資源共享）。 將以下內容添加到您的服務器文件中：

 // This should already be declared in your API file var app = express(); // ADD THIS var cors = require('cors'); app.use(cors());

為了更全面地了解 CORS，請閱讀關於 CORS的Mozilla 文檔。

Answer 2

我的問題是關於我請求的網址。 我沒有在 url 的開頭插入http:// 。 我的意思是我請求一個像92.920.920.920/api/Token而不是http://92.920.920.920/api/Token的網址。 添加http://解決了我的問題。

Answer 3

除了@jacobhobson 的回答之外，我還使用了一些參數來使其工作。

app.use(cors({origin: true, credentials: true}));

Answer 4

我在制作數字海洋液滴時遇到了同樣的問題。 我是用在ReactJS Axios公司撥打Node.js的API。

雖然我包括了 cors

const cors = require('cors');
app.use(cors());

但我還是要補充

res.header( "Access-Control-Allow-Origin" );

在調用我的控制器之前。 它對我有用。 在那里我意識到 cors 無法正常工作。 所以我卸載並再次安裝它們，它有效！

完整代碼在這里。

所以無論你使用

 app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
  res.header("Access-Control-Allow-Headers", "x-access-token, Origin, X-Requested-With, Content-Type, Accept");
  next();
});

或使用

app.use(cors());

這是一樣的。

Answer 5

確保cors({ origin : [ "http://localhost:3001"]})和.env文件中的端口號相同。

Answer 6

當您在本地主機上工作而忘記添加http://時會發生這種情況

錯誤使用

  const headers = {
    "Content-Type": "application/json",
    Authorization: apiKey,
  };
  const url = "localhost:5000/api/expenses/get-expenses";

  axios.get(url, { headers });

  // NETWORK ERROR

正確的是

  const headers = {
    "Content-Type": "application/json",
    Authorization: apiKey,
  };
  const url = "http://localhost:5000/api/expenses/get-expenses";

  axios.get(url, { headers });

  // WORKS FINE IF YOU HANDLED CORS CORRECTLY IN THE SERVER SIDE

Answer 7

當我嘗試將圖像上傳到我們的服務器時，我收到了 axios 0.27.2 的網絡錯誤。 在我設置如下標題后，沒有收到錯誤。

headers:{"Accept":"application/json, text/plain, /","Content-Type": "multipart/form-data"}

並且您需要檢查您的集合中的 api 請求的主體類型，例如它是 form-data 還是 x-wwww-form-urlencoded 或 ..etc。

Answer 8

就我而言，它發生在我的互聯網連接不穩定時。 確保您的互聯網連接穩定。

Answer 9

就我而言，我使用了“ https ”而不是“ http ”，也請檢查一下。

Answer 10

就我而言，我已經在 NodeJs 中設置了上面提到的所有需要​​的配置，但我仍然遇到錯誤。 我在 NodeJs 中使用了6000端口，然后將其更改為5000端口，問題解決了。
因此，如果您已完成所有替代方案，只需更改端口即可。

Answer 11

之所以會發生這種情況，是因為 restrict-origin-when-cross-origin 策略。瀏覽器發送一個飛行前請求以了解 API 服務器想要共享資源的對象。 因此，您必須在 API 服務器中設置來源並發送一些狀態。之后瀏覽器允許將請求發送到 API 服務器。

這是代碼。我在 localhost:8000 上運行前端，而 api 服務器在端口 6000 上運行。

const cors = require("cors");

app.options("*", cors({ origin: 'http://localhost:8000', optionsSuccessStatus: 200 }));

app.use(cors({ origin: "http://localhost:8000", optionsSuccessStatus: 200 }));

我已將 origin 設置為我的前端 url，如果您將其設置為 true ，那么它將僅允許端口 8000 訪問 rosource，並且運行在端口 8000 上的前端無法訪問此資源。 在 api 服務器中路由之前使用此中間件。

Answer 12

就我而言，當我通過 cors origin:http://localhost:3000 時，我在 localhost:3001 上運行應用程序

Answer 13

檢查您的服務器是否正在運行並且您的 API 是否已連接到數據庫。

"

Answer 14

我通過添加此標頭解決了我的問題。

var data = new FormData();
              data.append('request', 'CompaniesData');
           var config = {
                 method: 'post',
                 url: baseUrl, headers:{"Accept":"application/json, text/plain, /","Content-Type": "multipart/form-data"},
                    data : data
                  };
            
                 axios(config)
    .then(function (response) {
      console.log(JSON.stringify(response.data));
    })
    .catch(function (error) {
      console.log(error);
    });

Answer 15

我在 react-native 中使用 axios 作為 android 和 .net 作為后端，我有同樣的問題，但我無法解決問題。 我認為這是安全問題，當我在 chrome 中鍵入 url 時，它會在模擬器中警告我。

axios("http://10.0.2.2:5001/api/Users/getall")
  .then((result) => setUsers(result.data.data))
  .then((json) => {
    return json.data;
  })
  .catch((error) => {
    console.error(error);
  })
  .then((response) => response.parse());

Answer 16

就我而言，我使用 Hapi.js 作為后端，所以我所要做的就是將 cors 值設置為 true，如下面的代碼所示；

const server = Hapi.server({
       port: 4000,
       host: 'localhost',
       state: {
           strictHeader: false
       },
       routes: {
           cors: true
       }
});

Answer 17

花了大約 2 個小時檢查每條路線和配置。 終於發現我的錯誤了，我用的是URL="https://localhost:3000"而不是URL="http://localhost:3000"

Answer 18

對於 Expo React Native，我必須將 baseURL 更改為：http://10.0.2.2:[PORT http://10.0.2.2:[PORT]而不是 localhost 或http://127.0.0.1:[PORT]

這可能是由於模擬器通過此地址路由流量。

Answer 19

1. 更改節點服務器的port號。 解決這個錯誤花了3個多小時。 解決方案以更改端口號結束，該端口號最初設置為 6000，后來設置為 3001。然后它起作用了。 我的服務器本地主機基礎 url 是：

   "http://localhost:6000/data"

   我在服務器上更改了app.listen()中的端口號，從前端我將async function 中的GET路由稱為await axios.get('http://localhost:3001/data') 。 現在工作正常。

2. 如果您遇到地址問題： address already in use:::#port

   然后在命令提示符下： killall -9 node

Answer 20

我只是想讓你知道，在搜索了兩天的解決方案之后，我能夠解決我的錯誤。 由於代理是問題的根源，我必須在 package.json 文件中配置代理，並且必須在使用 Axios 的函數中遵循以下說明：

try { await axios.post("user/login", formData).then((res) => { console.log(res.data); }); } catch (error) { console.log(error.response.data.message); }

並在 package.json 文件中需要添加一個代理：

"proxy": "http://localhost:6000",

為了更好地理解，請查看此文檔：在此處輸入鏈接描述

Answer 21

對於節點或（MERN）應用程序

使用 (npm i cors) 安裝 cors 並在您的 index.js 或開始文件中添加

const express = require('express')
const app = express()
const cors= require('cors')
app.use(cors())

我希望你的問題得到解決

Answer 22

檢查是否安裝了廣告攔截器

Answer 23

使用 Api 時

---

確保你的網址是

• https

• 不僅僅是http

Answer 24

就我而言，我沒有啟動后端服務器。 確保您的后端服務器正在運行。