反应：Axios 网络错误

Question

This is my first time using axios and I have encountered an error.

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

With the right url and parameters, when I check network requests I indeed get the right answer from my server, but when I open console I see that it didn't call the callback, but instead it caught an error.

Error: Network Error Stack trace: createError@ http://localhost:3000/static/js/bundle.js:2188:15 handleError@ http://localhost:3000/static/js/bundle.js:1717:14

Answer 1

If Creating an API Using NodeJS

---

Your Express app needs to use CORS (Cross-Origin Resource Sharing). Add the following to your server file:

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

For fuller understanding of CORS, please read the Mozilla Documentation on CORS .

Answer 2

my problem was about the url I was requesting to. I hadn't inserted http:// at the beginning of my url. I mean I was requesting to a url like 92.920.920.920/api/Token instead of http://92.920.920.920/api/Token . adding http:// solved my problem.

Answer 3

除了@jacobhobson 的回答之外，我还使用了一些参数来使其工作。

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

Answer 4

I was having same issue on production on digital ocean droplet. I was using axios in ReactJS to call Node.js API.

Although I included cors

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

But I still had to add

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

before calling out my controller. And it worked for me. There I realized that cors is not working properly. So I uninstalled and installed them again and It Works!

Complete code is here.

So either you use

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

or use

app.use(cors());

It's the same.

Answer 5

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

Answer 6

It happens when you work on localhost and forgot to add http://

Wrong Usage

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

  axios.get(url, { headers });

  // NETWORK ERROR

The correct one is

  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

I received a network error with axios 0.27.2 when I was trying to upload an image to our server. After I set headers like below no error is received.

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

and you need to check with your api request's body type in your collection like if it's form-data or x-wwww-form-urlencoded or ..etc.

Answer 8

In my case it happened when my internet connection was unstable. Make sure your internet connection is stable.

Answer 9

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

Answer 10

In my case I had set all the needed configs mentioned above in NodeJs but I still got the error. I was using port 6000 in NodeJs and then I changed it to port 5000 and the problem was solved.
So just change the port if you have done all the alternatives.

Answer 11

This is happening because of restrict-origin-when-cross-origin policy.Browser sends a pre-flight request to know whom the API server wants to share the resources. So you have to set origin there in API server and send some status.After that the browser allow to send the request to the API server.

Here is the code.I am running front-end on localhost:8000 and api server is running on port 6000.

const cors = require("cors");

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

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

I have set origin as my front-end url, If You set it to true , then it will allow only port 8000 to access rosource, and front-end running on port 8000 can not access this resource. Use this middleware before route in api server.

Answer 12

就我而言，当我通过 cors origin:http://localhost:3000 时，我在 localhost:3001 上运行应用程序

Answer 13

检查您的服务器是否正在运行并且您的 API 是否已连接到数据库。

"

Answer 14

I have resolved my issue by adding this header.

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

i'm using axios in react-native as android and .net as backend, i have same issue but i can't solve the problem. I think it is security problem when i type the url in chrome it warns me about that in emulator.

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

In my case, I'm using Hapi.js as the backend, so all I had to do is set the cors value to true as in the code below;

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

Answer 17

Spent around 2 hours checking each routes and configs. Finally found my mistake, I used URL="https://localhost:3000" instead of URL="http://localhost:3000"

Answer 18

For Expo React Native, I had to change the baseURL to: http://10.0.2.2:[PORT] instead of localhost or http://127.0.0.1:[PORT]

This is probably due to the emulator routing traffic through this address.

Answer 19

1. change the port number of your node server. It took more than 3 hours to solve this error. Solution ended with changing port numer which was initially set to 6000, later set to 3001. Then it worked. My server localhost base url was:

   "http://localhost:6000/data"

   I changed port number in app.listen() on server and from frontend I call that GET route in async function as await axios.get('http://localhost:3001/data') . It is working fine now.

2. If you face the address issue: address already in use:::#port

   Then on command prompt: killall -9 node

Answer 20

I just want to let you know that after searching for a solution for two days, I was able to solve my error. Since the proxy was the source of the issue, I must configure a proxy in the package.json file, and I have to follow these instructions in the function that uses Axios:

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

and in package.json file need to add a proxy:

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

for better understand check this documentation: enter link description here

Answer 21

for Node or (MERN) Application

Install cors with (npm i cors) and in your index.js or start file add

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

I hope your problem is solved

Answer 22

检查是否安装了广告拦截器

Answer 23

When using Api

---

Make sure that your url its whith

• https

• Not just http

Answer 24

In my case, I didn't start the backend server. Make sure your backend server is running.