Post request via Axios fails while it succeeds from POSTMAN . How?

Question

I am trying to perform a post request with axios to an endpoint on a ubuntu vps(a django backend) . The api responds 201 created after a successful post request. Using Postman, i am able to perform a successful post request but when i am trying it with Axios, I can see the exceptions being catched in the console (i have used console.log).

Here's how i am doing it via Axios :

.
.
.


axios.defaults.xsrfCookieName = 'csrftoken'
axios.defaults.xsrfHeaderName = 'X-CSRFToken'

// Tried without headers as well
var headers = {'Content-Type': 'application/x-www-form-urlencoded'}

axios.post('http://127.0.0.1:8000/api/v1/subscribe/',data_str,headers)
.then(function(response) {
console.log('saved successfully');
// this.isHidden = false;
alert("Subscription succesful !!");
console.log(response)
}).catch((error) =>{
if(error.response){
console.log('1..........Response Error');
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
}
else if(error.request){
// This part gets printed in the browser console. No idea why
console.log('2..........Request Error');
console.log(error.request);
}
else{
console.log('3..........Other error');
console.log('Error', error.message);
}
console.log(error.config);
} );
var headers = {'Content-Type': 'application/x-www-form-urlencoded'}
axios.post('http://127.0.0.1:8000/api/v1/subscribe/',data_str,headers)
.then(function(response) {
console.log('saved successfully');
// this.isHidden = false;
alert("Subscription succesful !!");
console.log(response)
}).catch((error) =>{
if(error.response){
console.log('1..........Response Error');
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
}
else if(error.request){
console.log('2..........Request Error');
console.log(error.request);
}
else{
console.log('3..........Other error');
console.log('Error', error.message);
}
console.log(error.config);
} );

**Few CORS configurations in my django rest api :

CORS_ORIGIN_ALLOW_ALL = True

CORS_ALLOW_CREDENTIALS = True

CORS_ALLOW_METHODS = ['DELETE','GET','OPTIONS','PATCH','POST','PUT',]

CORS_ALLOW_HEADERS = ['*']

Here's the pic of the errors in console This is the console log in browser

I appreciate if anyone helps .

Thanks in Advance !

and can you also check what happens if you try this on chrome, it might fail on the OPTIONS request, that'll help — supra28
@supra28 Here's the screenshot of Chrome logs : I don't know where OPTIONS in chrome — abkuxd

abkuxd abkuxd · Accepted Answer · 2018-06-04T07:18:58

Thanks for your inputs. I solved this issue . The URL in performing the POST request was http://localhost:8000/api/v1/subscribe which after replacing to http://my website.com/api/v1/subscribe worked successfully.

I was performing with the actual URL :

i.e, http://my website.com/api/v1/subscribe in Postman and that's why it was succeeding. Where as in vue I was using the local host which kept giving error . ☺️

Post request via Axios fails while it succeeds from POSTMAN . How?

1 Answers