Axios POST returns "Network Error" even if status is 200 and there's a response

Question

I'm using Vue JS 2.5 with Axios:

"vue": "^2.5.17",
"vue-axios": "^2.1.4",
"axios": "^0.18.0",

I'm trying to make a POST call just like this:

const data = querystring.stringify({
                'email': email,
                'password': password,
                'crossDomain': true, //optional, added by me to test if it helps but it doesn't help
            });

var axiosConfig = {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        // "Access-Control-Allow-Origin": "*",
                        'Accept': '*',
                    }
                };

axios.post(url, data, axiosConfig)
                .then((response) => {
                    console.log('response');
                    console.log(response);
                })
                .catch((error) => {
                    console.log('error');
                    console.log(error);
                });

I tried also without the "axiosConfig" parameter. But everytime it enters on the catch, with the message: Error: Network Error

In the browser's Network tab I get a 200 status and a good Response (with a valid json), it basically works but Axios returns error and no response.

The console also outputs this warning: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://url/api/page. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

I tried to make the same call from Postman and it works well. The difference is that Axios is sending the headers: "Origin" and "Referrer" with my localhost:8080, which is different than the API url that I'm calling.

How can I make this call from axios without getting this error? Thanks.

EDIT

It works if I'm using PHP:

$curl = curl_init();

        curl_setopt_array($curl, array(
            CURLOPT_URL => "https://myurl",
            CURLOPT_RETURNTRANSFER => true,
            CURLOPT_ENCODING => "",
            CURLOPT_MAXREDIRS => 10,
            CURLOPT_TIMEOUT => 30,
            CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
            CURLOPT_CUSTOMREQUEST => "POST",
            CURLOPT_POSTFIELDS => "------WebKitFormBoundaryTrZu0gW\r\nContent-Disposition: form-data; name=\"email\"\r\n\r\nemail\r\n------WebKitFormBoundaryTrZu0gW\r\nContent-Disposition: form-data; name=\"password\"\r\n\r\npassword\r\n------WebKitFormBoundaryTrZu0gW--",
            CURLOPT_HTTPHEADER => array(
                "Postman-Token: 62ad07e5",
                "cache-control: no-cache",
                "content-type: multipart/form-data; boundary=----WebKitFormBoundaryTrZu0gW",
                "email: email",
                "password: password"
            ),
        ));

        $response = curl_exec($curl);
        $err = curl_error($curl);

        curl_close($curl);

        if ($err) {
            echo "cURL Error #:" . $err;
        } else {
            echo $response;
        }

I just copy-pasted the generated Postman call and tried it from a different page and it works well. So it's not a CORS problem, it's a problem with my Javascript call.

By changing the **server** to allow cross origin resource sharing (CORS) — Bravo, Oct 29 '18 at 11:29
It works if I'm sending making post using Postman, from localhost. It's not a server config issue. It's related to Axios. — Pascut, Oct 29 '18 at 11:31
no, it is unrelated to Axios ... Postman doesn't need CORS to work - read about [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) — Bravo, Oct 29 '18 at 11:32
Really? Didn't knew that. I'll make more checks (using plain JS call instead of axios) and get back to you with a comment. — Pascut, Oct 29 '18 at 11:33
I checked with PHP using CURL and works well. So it's a problem with JS calls. From PHP is working well. — Pascut, Oct 29 '18 at 12:31
Doesn't matter, it's the web browser that disallows the request. You need to change the server still for it to work in JavaScript. — Ryan Taylor, Oct 29 '18 at 19:55
yes, unfortunately is the browser that disallows the request — Pascut, Oct 30 '18 at 10:46

score 6 · Accepted Answer · answered Oct 29 '18 at 11:32

6

You need to enable CORS on your API, which language/framework are you using?

Here's some reference:

https://enable-cors.org/

answered Oct 29 '18 at 11:32

Rafael Rahal

84
2

3

It works if I'm sending making post using Postman, from localhost. It's not a server config issue. The issue is related to Axios. – Pascut Oct 29 '18 at 11:33
I will try to make the same call that is generated from Postman and see what happens. I can copy-paste the Postman JS call to my page and run it. I'll get back with an new comment soon. – Pascut Oct 29 '18 at 11:35
You can't make the browser pretend not to be a browser :p – Bravo Oct 29 '18 at 11:40
1

I checked with PHP using CURL and works well. So it's a problem with javascript calls. From PHP is working well and there aren't different server settings. – Pascut Oct 29 '18 at 12:31
3

It works because server-side calls (e.g php-curl) are not subjected to CORS, it only applies for client-side calls – Rafael Rahal Oct 29 '18 at 13:21
Which framework are you using for the backend? – Rafael Rahal Oct 29 '18 at 13:22
doesn't matter, I changed nginx config to allow cors connections – Pascut Oct 30 '18 at 10:47

Axios POST returns "Network Error" even if status is 200 and there's a response

1 Answers1

Linked