1

Intento hacer una petición con Axios desde un componente Vue. El servidor la recoge corréctamente, con un status code 200, pero tengo un problema con la respuesta. Me da este error:

Failed to load http://....: Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.

Este es mi código:

  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))


    },

En Network, el proceso tiene status code 200, como he dicho antes, y esto es lo que me muestra.

  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

¿Necesito configurar headers en Vue? Porque en el servidor ya tengo habilitado todo, incluso recoge el post sin problema.

El error en Firefox es el siguiente:

Solicitud desde otro origen bloqueada: la política de mismo origen impide leer el recurso remoto en http://.... (razón: token 'content-type' no presente en la cabecera CORS 'Access-Control-Allow-Headers' del canal CORS prevuelo).

Pero no encuentro nada aclarativo en Google.

3
  • 3
    ¿Responde tu servidor al comando OPTIONS además del comando POST? El navegador se te está quejando de que la respuesta cors no es apropiada en el preflight, lo que se refiere a la petición "OPTIONS" que lanza el navegador a modo de prueba previa antes de intentar después el POST.
    – abulafia
    Commented el 11 sept. 2018 a las 16:53
  • 2
    Habria que ver tu backend, pero no esta aceptando ese header.
    – gbianchi
    Commented el 11 sept. 2018 a las 17:02
  • 1
    Gracias por vuestros comentarios. He editado el post para mostrar lo que tengo en Network. He probado a quitar los Headers, pero tengo el mismo error. Commented el 12 sept. 2018 a las 6:30

1 respuesta 1

2

Según esta respuesta, no puedes usar asterisco en Access-Control-Allow-Headers. Cámbialo por Content-Type:

'Access-Control-Allow-Headers':'Content-Type'
3
  • 1
    Gracias por tu respuesta. Le he cambiado los headers varias veces y me sigue dando el mismo problema. El backend recibe el JSON perfectamente, el problema es que por algún motivo, se bloquea la respuesta. Commented el 12 sept. 2018 a las 7:13
  • 1
    Prueba, además, lo que te dice @abulafia, a añadir OPTIONS en Access-Control-Allow-Methods. Y pon el resultado (cabeceras de petición y respuesta) Commented el 12 sept. 2018 a las 7:17
  • 1
    Ok, solucionado siguiendo este mensaje: Yes, you need to have the header Access-Control-Allow-Origin: domain.com:3000 or Access-Control-Allow-Origin: * on both the OPTIONS response and the POST response. You should include the header Access-Control-Allow-Credentials: true on the POST response as well. Your OPTIONS response should also include the header Access-Control-Allow-Headers: origin, content-type, accept to match the requested header. Commented el 12 sept. 2018 a las 11:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.