網絡錯誤 axios 並反應本機

Question

我使用我在外部托管的 Django python 框架創建了一個 API 端點。 我可以從瀏覽器 ( mydomain.com/endpoint/ ) 訪問我的端點並驗證沒有錯誤。 當我在我的開發機器 ( localhost:8000/endpoint/ ) 上本地運行我的測試 django 服務器時也是如此。 當我將本地主機用作端點時，我的 json 數據可以毫無問題地通過。 當我使用我的生產域時，axios 遇到了一個.network 錯誤，並且它提供的上下文不多......從調試控制台我得到這個：

Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:87)
    at XMLHttpRequest.dispatchEvent (event-target.js:172)
    at XMLHttpRequest.setReadyState (XMLHttpRequest.js:554)
    at XMLHttpRequest.__didCompleteResponse (XMLHttpRequest.js:387)
    at XMLHttpRequest.js:493
    at RCTDeviceEventEmitter.emit (EventEmitter.js:181)
    at MessageQueue.__callFunction (MessageQueue.js:353)
    at MessageQueue.js:118
    at MessageQueue.__guardSafe (MessageQueue.js:316)

這是我在本機反應組件中的 axios 調用：

    componentDidMount() {
        axios.get('mydomain.com/get/').then(response => {  // localhost:8000/get works
            this.setState({foo:response.data});
        }).catch(error => {
            console.log(error);
        });
    }

Answer 1

如果您嘗試在使用 AVD 創建的 android 模擬器上調用 localhost，將 localhost 替換為 10.0.2.2 為我解決了這個問題。

Answer 2

似乎在 iOS 中默認情況下會阻止未加密的網絡請求，即https可以工作， http不會。

從文檔：

默認情況下，iOS 將阻止任何未使用 SSL 加密的請求。 如果您需要從明文 URL（以 http 開頭的 URL）獲取，您首先需要添加應用程序傳輸安全異常。

Answer 3

1. 從localhost更改為您的ip(192.168.43.49)

2. 添加http://

   http://192.168.43.49:3000/user/

Answer 4

如果您在其他帖子中沒有找到您的答案

就我而言，我使用 Rails 作為后端，並嘗試使用 Axios 向http://localhost:3000發出請求，但每次我收到Network Error作為響應。 然后我發現在android模擬器的情況下我需要向http://10.0.2.2:3000發出請求。 對於 iOS 模擬器，它適用於http://localhost:3000 。

結論

利用

http://10.0.2.2:3000

代替

http://localhost:3000

Answer 5

對我來說，問題是因為我的遠程 URL 不正確。 如果您的 URL 是 .env 文件，請交叉檢查命名並確保它以 REACT_APP_ 為前綴，因為如果以其他方式命名，react 可能無法找到它。

在 .env 文件中，像 REACT_APP_BACKEND_API_URL= https://appurl/api這樣的東西可以作為 const { REACT_APP_BACKEND_API_URL } = process.env;

Answer 6

嘗試“Content-Type”：“application/x-www-form-urlencoded”，接受：“application/json”

Answer 7

確保將localhost更改為your_ip_address ，您可以通過在命令提示符中鍵入ipconfig來找到它

嘗試添加到您的AndroidManifest.xml

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Answer 8

我面臨着同樣的問題。

我看得更深，我的

端點url不正確。

通過為axios提供正確的准確 url，我的 api 就像魅力一樣工作。

希望它可以幫助任何人

Answer 9

如果您使用的是 android，請打開命令提示符並鍵入 ipconfig。 然后獲取您的 IP 地址並使用 localhost 替換它。

就我而言，首先我使用了 http://localhost:8080/api/admin/1。 然后我將其更改為http://192.168.1.10:8080/api/admin/1 。 它對我有用。

Answer 10

上面提到的答案僅在您使用本地主機時有效，但如果您的代碼托管在服務器上並且 Axios 拋出網絡錯誤，那么您可以通過添加一行來解決此問題。

const config = {
  method: 'post',
  url: `${BASE_URL}/login`,
  headers: { 
    'Content-Type': 'multipart/form-data'.  <----- Add this line in your axios header
  },
  data : formData
};


  axios(config).then((res)=> console.log(res))

Answer 11

我在 React Native Android 中使用apisauce依賴並為我添加標頭工作。

附加帶有請求的標頭，如下所示：

import { create } from 'apisauce';

    const api = create({
    baseURL: {baseUrl},
    headers: {
                Accept: 'application/json',
               'Content-Type': 'application/json'
             }
    });

export async function empLogin(data) {
   try {
         const response = api.post('Login', data);
         return await response;
   } catch (error) {
         console.log(error);
         return [];
   }
}

Answer 12

之前：axios.get("http://localhost:3456/apt").then( response => { alert(JSON.stringify(response)); .... } ).catch(function(error) { alert (error.message); console.warn(error.response._response);

});

我收到錯誤“網絡錯誤”之后無法連接到本地主機，我采取了一些步驟來解決錯誤。

與 axios 相關的網絡錯誤通過禁用系統防火牆和從系統訪問 IP 地址解決

axios.get("http://192.168.12.10:3456/apt").then( response => { alert(JSON.stringify(response)); .... } ).catch(function(error) { alert (error.message); console.warn(error.response._response);

});

Answer 13

利用

axios.get(`http://baseurl.com/endpoint`)

代替

axios.get(`${BASE_URL}/endpoint`)

解決了我的問題Error: Network Error

Answer 14

我已經使用外部托管的Django python框架創建了API端點。 我可以從瀏覽器（ mydomain.com/endpoint/ ）訪問我的端點，並確認沒有錯誤。 當我在開發機器上的本地（ localhost:8000/endpoint/ ）上運行測試django服務器時，情況也是如此。 當我使用本地主機作為終結點時，我的json數據順利通過。 當我使用生產域時，axios陷入了網絡錯誤，並且沒有太多上下文可以從調試控制台中得到……

Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:87)
    at XMLHttpRequest.dispatchEvent (event-target.js:172)
    at XMLHttpRequest.setReadyState (XMLHttpRequest.js:554)
    at XMLHttpRequest.__didCompleteResponse (XMLHttpRequest.js:387)
    at XMLHttpRequest.js:493
    at RCTDeviceEventEmitter.emit (EventEmitter.js:181)
    at MessageQueue.__callFunction (MessageQueue.js:353)
    at MessageQueue.js:118
    at MessageQueue.__guardSafe (MessageQueue.js:316)

這是我的React Native組件中的axios調用：

    componentDidMount() {
        axios.get('mydomain.com/get/').then(response => {  // localhost:8000/get works
            this.setState({foo:response.data});
        }).catch(error => {
            console.log(error);
        });
    }