Axios: Agregar encabezados al método axios.post

Esto no es un error, está funcionando como se esperaba.
Está generando una solicitud con verificación previa (no una simple) como se indica en los documentos https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS porque está agregando un encabezado y un tipo de contenido que fuerza esto.
Entonces, en este modo, se emite una solicitud de OPCIONES antes de su solicitud principal, debe asegurarse de que el servidor pueda administrar la solicitud de OPCIONES para que funcione.

Editar: tuve que agregar Autorización a los encabezados permitidos en mi filtro CORS

@jfernandez

Estoy teniendo el mismo problema. Cuando omito el encabezado de autenticación, recibo una solicitud de opciones que devuelve POST, OPCIONES y luego el POST que devuelve un 403 porque falta el encabezado de autorización (esperado).

Cuando agrego el encabezado, solo obtengo la solicitud de opción y nunca hace el POST.

post("http://localhost:8080/foo", foo)

contra

post("http://localhost:8080/foo", foo, {
    headers: { Authorization: "Bearer " + token }
})

Es un problema de CORS, no en axios. Eche un vistazo al enlace proporcionado por @jffernandez o busque problemas similares aquí.

Sí, se trata de CORS. Pero si eres como yo, es probable que te hayas olvidado de agregar el tipo de contenido autorizado en tu servidor API.

AllowedHeaders: Tipo de contenido y X-Requested-With
Y autorización en su caso.

Y, por supuesto, no olvide permitir OPCIONES de método también.

axios({ method: 'POST', url: 'you http api here', headers: {autorizacion: localStorage.token}, data: { user: 'name' } })

O si desea superar este error CORS, puede instalar el paquete corsproxy en su nodo. Esto lo ayudará con los errores de origen cruzado. Puede consultar el siguiente enlace:

https://github.com/gr2m/CORS-Proxy

````
Iniciar sesión = () => {
console.log('se hizo clic en el inicio de sesión')
dejar datos = JSON.stringify({
contraseña: this.state.password,
nombre de usuario: this.state.email
})

axios.post('url', data, {
    headers: {
        'Content-Type': 'application/json',
    }
}
)

}
```

Resuelvelo agregando este encabezado

   axios.post('http://localhost/M-Experience/resources/GETrends.php',
      {
        firstName: this.name
      },
      {
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
      });

Así es como tuve que formatear mi solicitud POST

    var postData = {
      email: "[email protected]",
      password: "password"
    };

    let axiosConfig = {
      headers: {
          'Content-Type': 'application/json;charset=UTF-8',
          "Access-Control-Allow-Origin": "*",
      }
    };

    axios.post('http://<host>:<port>/<path>', postData, axiosConfig)
    .then((res) => {
      console.log("RESPONSE RECEIVED: ", res);
    })
    .catch((err) => {
      console.log("AXIOS ERROR: ", err);
    })

para resolver el error cors simplemente ejecute este comando npm i --save cors y luego en su app.js importe así

var cors = require('cors');
luego llame así en el mismo archivo en mi caso, mi archivo raíz es app.js
app.use(cors());

resolverá su problema cors

@mirzaumersaleem No estoy usando cors, pero estoy tratando de publicar en mi backend usando axios y recibo una solicitud 400 Bad

fetch puede funcionar con cors (el backend no tiene ningún problema), pero con axios, en algún momento falló.

para resolver el error cors simplemente ejecute este comando npm i --save cors y luego en su app.js importe así

var cors = require('cors');
luego llame así en el mismo archivo en mi caso, mi archivo raíz es app.js
app.use(cors());

resolverá su problema cors

En mis viajes, CORS debe realizarse en el servidor (.net/java/node/php, etc.)

Editar: tuve que agregar Autorización a los encabezados permitidos en mi filtro CORS

@jfernandez

Estoy teniendo el mismo problema. Cuando omito el encabezado de autenticación, recibo una solicitud de opciones que devuelve POST, OPCIONES y luego el POST que devuelve un 403 porque falta el encabezado de autorización (esperado).

Cuando agrego el encabezado, solo obtengo la solicitud de opción y nunca hace el POST.

post("http://localhost:8080/foo", foo)

contra

post("http://localhost:8080/foo", foo, {
    headers: { Authorization: "Bearer " + token }
})

la respuesta rápida es que el primer argumento después de la URL y el segundo a menudo se pierden, es decir, axios (url, datos, configuración), por lo que si omite la parte de configuración o cambia los datos y la configuración, probablemente obtenga resultados inesperados, en general, trabajar con localhost debería ser sin ningún problema en absoluto.

En general, no es muy legible.

axios.request(config)
axios.get(url[, configuración])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, datos[, configuración]])
axios.put(url[, datos[, configuración]])
axios.patch(url[, datos[, configuración]])

Esperaba que todas las api fueran consistentes y tuvieran
1) url como primer parámetro,
2) config como segundo parámetro (opcional),
3) datos (opcional)

porque eso es lo que los usuarios esperan, a pesar de eso, axios creó un gran problema a partir de esa pequeña decisión de API, por lo que casi todos quedaron atrapados allí al menos una vez en la vida.

Trabajó para mí:

`
encabezados constantes = {
'Tipo de contenido': 'aplicación/json',
'Autorización': 'JWT fefege...'
}

axios.post(Helper.getUserAPI(), datos, {
encabezados: encabezados
})
.entonces((respuesta) => {
envío({
tipo: USUARIO_ENCONTRADO,
datos: respuesta.datos[0]
})
})
.catch((error) => {
envío({
escriba: ERROR_FINDING_USER
})
})
`

Enfrentando el mismo problema aquí con jquery, la solicitud es exitosa, pero cuando envío la solicitud con axios, obtengo un problema de cors.
Mi petición--

      .post('https://test.pi.com/j_spring_security_check', {

        withCredentials: true,
        crossorigin: true,
        headers: {
          common:{
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'WithCredentials': true,
            'Access-Control-Allow-Origin': '*'
        }
      },
        data: JSON.stringify({
          j_username: email,
          j_password: password
        }),

        // proxy: {
        //   '/j_spring_security_check/*': 'https://devtest.pvai.com/j_spring_security_check',
        // }
      })

estos son los encabezados de respuesta del servidor y mi origen locahost está permitido, los encabezados que estoy enviando están permitidos y los métodos también.

access-control-allow-credentials: true
access-control-allow-headers: Authorization, X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept
access-control-allow-methods: POST, GET, OPTIONS
access-control-allow-origin: http://localhost:5000
access-control-expose-headers: Authorization
cache-control: no-cache, no-store, max-age=0, must-revalidate
content-length: 0
date: Wed, 11 Dec 2019 04:53:25 GMT
expires: 0
location: /authFailure
pragma: no-cache
status: 302
strict-transport-security: max-age=31536000 ; includeSubDomains
x-content-type-options: nosniff
x-frame-options: SAMEORIGIN
x-xss-protection: 1; mode=block

Así es como tuve que formatear mi solicitud POST

    var postData = {
      email: "[email protected]",
      password: "password"
    };

    let axiosConfig = {
      headers: {
          'Content-Type': 'application/json;charset=UTF-8',
          "Access-Control-Allow-Origin": "*",
      }
    };

    axios.post('http://<host>:<port>/<path>', postData, axiosConfig)
    .then((res) => {
      console.log("RESPONSE RECEIVED: ", res);
    })
    .catch((err) => {
      console.log("AXIOS ERROR: ", err);
    })

¡Gracias, me salvó el día! Trabajó para mi