Error "Access-Control-Allow-Origin is not allowed" with Vue.js

0

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.

    
asked by Miguel Herreros Cejas 11.09.2018 в 18:25
source

1 answer

1

According to this answer, you can not use an asterisk in Access-Control-Allow-Headers. Change it to Content-Type:

'Access-Control-Allow-Headers':'Content-Type'
    
answered by 12.09.2018 в 09:06