I was consuming data from an API using XHR and it was working very well, but there were some changes in the design and there was a need to use Vue. I tried to make the same requests using Axios and soon after the Vue Resource but in both I was not successful.
Code using XHR:
var data = JSON.stringify(false);
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.open("POST", "api/url");
xhr.send(data);
xhr.addEventListener("readystatechange", function () {
if (this.readyState === this.DONE) {
console.log(this.responseText);
}
});
Code using Axios:
axios({
method: 'post',
url: 'api/url',
data: JSON.stringify(false),
withCredentials: true
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
Code using Vue-resource:
var data = JSON.stringify(false);
this.$http.post("api/url", data, {
headers: {
credentials : true,
}}).then(resp => console.log(resp));
Using both Axios and Vue-resource I get the following error:
"Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource."
It seems like a CORS issue.