getting Network Error when calling axios get request in react js

Question

I am using React.js in macOS and when I try to call axios.get, I get Network Error. I read many other cases like mine who were using React Native and the answer to them was adding settings to allow them to use http in mac instead of https, but that setting can not be used in react js.

Any advice would be appreciated.

Error: Network Error
    at createError (createError.js:17)
    at XMLHttpRequest.handleError (xhr.js:87)

My code is like this:

try {
  const Response = await axios.get(http://xxxxx/WebServiceTest/service.svc?wsdl/GetItems, {
   
    params: {
      Number: "100",
      Id: "101",
      userName: "11",
      credential: "Test"
    }
  });
  console.log("http response = " + Response.data);
} catch (ex) {
  console.log("error.status:", ex);
}

VnoitKumar · Accepted Answer · 2019-05-24 19:01:37Z

4

Change your await to a promise, even if you put await the axios function will work asynchronously.

async functionName() {
  let response = () => {
    return new Promise(function(resolve, reject) {
      fetch('http://xxxxx/WebServiceTest/service.svc?wsdl/GetItems', {
        params: {
          Number: "100",
          Id: "101",
          userName: "11",
          credential: "Test"
        }
      }).then(response => {
        resolve(response);
      });
    });
  };
  let responseData = await response();
  console.log(responseData.data);
}

edited May 24, 2019 at 19:01

answered May 24, 2019 at 18:19

VnoitKumar

1,42618 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

albert sh Over a year ago

Thanks for your reply, now I get error:"Unhandled Rejection (TypeError): Cannot read property 'get' of undefined", I searched but couldnt find a solution for that, please advice

albert sh Over a year ago

Thanks for the answer, unfortunately I have issue connection to third party's server and waiting for them to resolve, I will test asap and let you know

Gary Carlyle Cook Over a year ago

Isn't this simply fetch instead of Axios? Essentially what you seem to be saying, to me, is that Axios is useless and I wouldn't think that a credible opinion, to be honest. Since Axios is highly respected generally.

Nafaz M N M · Accepted Answer · 2020-03-13 09:44:33Z

4

I have found the solution in spring boot by using @CrossOrigin annotation.

@RestController
@CrossOrigin
@RequestMapping("/cus")
public class CusController{

    @Autowired
    CustomerService cus_service=null;

    @PostMapping("/save")
    public Customer saveCustomer(@RequestBody Customer customer)
    {

        if(customer!=null)
            return cus_service.saveCustomer(customer);
        else
            throw new DataNotFoundException("Data Not Available For Customer");

    }
}

answered Mar 13, 2020 at 9:44

Nafaz M N M

1,7765 gold badges29 silver badges44 bronze badges

Comments

Sheetal Singh · Accepted Answer · 2020-09-01 16:37:56Z

2

You can simply make the following changes in your

axios.create({baseURL:" "});

make it into

const instance = axios.create(
{
        baseURL: "",
        withCredentials: false,
        headers: {
          'Access-Control-Allow-Origin' : '*',
          'Access-Control-Allow-Methods':'GET,PUT,POST,DELETE,PATCH,OPTIONS',   
      }
  })

In your case try adding the above wherever you must have created instance of your axios.If you are using default axios then consider creating custom instance following the above code.

answered Sep 1, 2020 at 16:37

Sheetal Singh

1011 silver badge2 bronze badges

Comments

Majkelele · Accepted Answer · 2023-09-06 19:10:30Z

2

your server should enable the cross origin requests, not the client. if you use backend adress for some operation you should enable for example in node.js the CQRS.

answered Sep 6, 2023 at 19:10

Majkelele

3851 gold badge5 silver badges14 bronze badges

1 Comment

Gaming Fury Over a year ago

Can you give me the steps to do it with screenshots? So it will be easier for me and my fellow coders to understand.

jawad zahoor · Accepted Answer · 2020-01-01 18:24:57Z

0

You can use axios method in reactjs using some commands on server side code to get rid of cors policy error i have used these commands on my server side code which is in php

header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
header('Access-Control-Allow-Headers: *');
header('Access-Control-Max-Age: 1728000');
header("Content-Length: 0");
header("Content-Type: text/plain");

remember: add these lines immediately starting session

answered Jan 1, 2020 at 18:24

jawad zahoor

971 silver badge7 bronze badges

1 Comment

Gary Carlyle Cook Over a year ago

Why Allow Origin twice?

ganicvp7 · Accepted Answer · 2021-04-11 13:04:26Z

0

We have to allow CORS, placing Access-Control-Allow-Origin:* in header of request may not work. Install a google extension which enables a CORS request.
Make sure the credentials you provide in the request are valid.
if you are passing request to the virtual homestead server, make sure the machine has been provisioned. If you are using vagrant try vagrant up --provision this will make the localhost connect to db of the homestead.
Try changing the content type of the header. header:{ 'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8;application/json' } this point is very important.

edited Apr 11, 2021 at 13:04

answered Apr 9, 2021 at 2:54

ganicvp7

574 bronze badges

Comments

Hritik Sharma · Accepted Answer · 2023-06-18 23:31:38Z

0

Caso utilize um servidor back-end local, é só baixar o modulo do cors e incluir no back-end que resolve.

English: If you use a local back-end server, just download the cors module and include it in the back-end that solves it.

edited Jun 18, 2023 at 23:31

Hritik Sharma

2,0361 gold badge11 silver badges27 bronze badges

answered Jun 15, 2023 at 11:26

Moises Souza

11 bronze badge

1 Comment

Hritik Sharma Over a year ago

Please use 'English' as a language, or else it is very hard for others to understand.

GLK · Accepted Answer · 2023-09-02 01:14:31Z

0

In my case faced issue due to withCredentials : true after setting it to false it started working.

const axiosInstance = axios.create({timeout : 2000, baseURL : baseUrl , withCredentials : true})

In fact nothing wrong with withCredentials : true but it require few more settings which still I need to implement.

answered Sep 2, 2023 at 1:14

GLK

1,0853 gold badges14 silver badges29 bronze badges

Comments

ABHIRAM · Accepted Answer · 2023-07-31 18:57:04Z

I personally, when I got this error I re-checked my API link. My API link used to be "https://localhost:5000/" for my backend works. But I used to get Network error and Xhttprequest error. After searching I got to know that there is an error with my API link and that is the reason there's a Network error.

Network error arises when the connection or communication between your device and the API is not going straight, precisely you should check your API endpoints and mainly recheck your API link.

When I scanned my code for errors for several hours, I get to know that my API link was incorrect, it has to be "http://localhost:5000/". There's a huge difference between HTTP and HTTPS. I hope this answer will give you a clarity about this error.

Collectives™ on Stack Overflow

getting Network Error when calling axios get request in react js

9 Answers 9

3 Comments

Comments

Comments

1 Comment

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

3 Comments

Comments

Comments

1 Comment

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related