Error executing API requests using Axios and Vue-resource

1

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.

    
asked by anonymous 27.12.2017 / 19:58

0 answers