I try to make a request with Axios from a Vue component. The server collects it correctly, with a status code 200, but I have a problem with the answer. I get this error:
Failed to load http: // ....: Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.
This is my code:
login() {
const url = 'http:/...';
//axios.post(url[, data[, config]])
const fakeData = {user:"loquesea", password: "loquesea"} ;
var config = {
headers: {
'Content-type': 'application/json; charset=utf-8',
'Access-Control-Allow-Origin':'*',
'Access-Control-Allow-Methods': 'POST',
'Access-Control-Allow-Headers':'*',
'cache-control': 'no-cache'
}
};
axios.post(url, fakeData, config)
.then(response => {
if(!response) {
return response.status(404).send({
message: "Note not found with id "
});
}
console.log(response.data);
//window.localStorage.token = response.token
//window.localStorage.user = window.atob(response.token.split('.')(1))
//this.$router.push('/')
})
.catch(err => (this.error = err))
},
In Network, the process has status code 200, as I said before, and this is what it shows me.
Request URL: http://....
Request Method: OPTIONS
Status Code: 200 OK
Remote Address: ...:80
Referrer Policy: no-referrer-when-downgrade
Access-Control-Allow-Origin: *
Cache-Control: no-cache
Content-Length: 0
Content-Type: text/html; charset=utf-8
Date: Wed, 12 Sep 2018 06:26:37 GMT
Server: Google Frontend
X-Cloud-Trace-Context: e950a6cbc4a8b12a6a04a5b716cd69ed
Provisional headers are shown
Access-Control-Request-Headers: content-type
Access-Control-Request-Method: POST
Origin: http://localhost:8080
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6)
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106
Safari/537.36
Do I need to configure headers in Vue? Because I already have everything enabled on the server, it even collects the post without problem.
The error in Firefox is as follows:
Request from another blocked source: the same source policy prevents reading the remote resource at http: // .... (reason: token 'content-type' not present in the CORS header 'Access-Control -Allow-Headers' of the CORS channel preflight).
But I do not find anything clarifying in Google.