Axios: Adicionando cabeçalhos ao método axios.post

Isso não é um bug, está funcionando como esperado.
Você está gerando uma solicitação preflighted (não simples) conforme indicado nos documentos https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS porque você está adicionando um cabeçalho e um tipo de conteúdo que força isso.
Portanto, neste modo, uma solicitação OPTIONS é emitida antes de sua solicitação principal, você deve garantir que o servidor possa gerenciar a solicitação OPTIONS para que ela funcione.

Editar: eu tive que adicionar autorização aos cabeçalhos permitidos no meu filtro CORS

@jffernandez

Estou tendo o mesmo problema. Quando deixo de fora o cabeçalho Auth, estou recebendo uma solicitação de opções que retorna POST, OPTIONS e, em seguida, o POST que retorna um 403 porque está faltando o cabeçalho Authorization (esperado).

Quando eu adiciono o cabeçalho eu só recebo a solicitação de opção e nunca faz o POST.

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

vs

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

É um problema CORS, não em axios. Por favor, dê uma olhada no link que @jffernandez forneceu ou procure por problemas semelhantes aqui.

Sim, é sobre CORS. Mas se você é como eu, provavelmente esqueceu de adicionar o Content-Type autorizado em seu servidor de API.

AllowedHeaders : Content-Type e X-Requested-With
E autorização no seu caso.

E claro, não se esqueça de permitir OPÇÕES do método também.

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

Ou se você quiser superar esse erro CORS, você pode instalar o pacote corsproxy em seu nó. Isso irá ajudá-lo com erros de origem cruzada. Você pode consultar o link abaixo:

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

````
Entrar = () => {
console.log('login clicado')
deixe dados = JSON.stringify({
senha: this.state.password,
nome de usuário: this.state.email
})

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

}
```

Resolva adicionando este cabeçalho

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

Foi assim que eu tive que formatar minha solicitação 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 o erro do cors, basta executar este comando npm i --save cors e, em seguida, no seu app.js importe assim

var cors = require('cors');
então chame assim no mesmo arquivo no meu caso meu arquivo raiz é app.js
app.use(cors());

vai resolver seu problema de cors

@mirzaumersaleem Não estou usando o cors, mas estou tentando postar no meu backend usando axios e estou recebendo uma solicitação 400 Bad

fetch pode fazer com cors (o backend não tem problema), mas com axios, às vezes falha.

para resolver o erro do cors, basta executar este comando npm i --save cors e, em seguida, no seu app.js importe assim

var cors = require('cors');
então chame assim no mesmo arquivo no meu caso meu arquivo raiz é app.js
app.use(cors());

vai resolver seu problema de cors

Nas minhas viagens, o CORS precisa ser feito no servidor ( .net /java/node/php etc..)

Editar: eu tive que adicionar autorização aos cabeçalhos permitidos no meu filtro CORS

@jffernandez

Estou tendo o mesmo problema. Quando deixo de fora o cabeçalho Auth, estou recebendo uma solicitação de opções que retorna POST, OPTIONS e, em seguida, o POST que retorna um 403 porque está faltando o cabeçalho Authorization (esperado).

Quando eu adiciono o cabeçalho eu só recebo a solicitação de opção e nunca faz o POST.

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

vs

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

a resposta rápida é que o primeiro argumento após o url e o segundo geralmente são mal colocados, ou seja, axios (url, data, config), portanto, se você omitir a parte de configuração ou mudar os dados e a configuração, provavelmente obterá resultados inesperados, em geral, trabalhar com localhost deve ser sem quaisquer problemas.

Em geral, não é muito legível

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

Eu esperava que todas as APIs fossem consistentes e tivessem
1) url como primeiro parâmetro,
2) config como segundo parâmetro (opcional),
3) dados (opcional)

porque é isso que os usuários esperam, apesar disso, axios criou um grande problema com essa pequena decisão da API, de modo que quase todos ficaram presos lá pelo menos uma vez na vida.

Trabalhou para mim:

`
cabeçalhos const = {
'Content-Type': 'application/json',
'Autorização': 'JWT fefege...'
}

axios.post(Helper.getUserAPI(), data, {
cabeçalhos: cabeçalhos
})
.then((resposta) => {
Despacho({
tipo: FOUND_USER,
dados: resposta.data[0]
})
})
.catch((erro) => {
Despacho({
tipo: ERROR_FINDING_USER
})
})
`

Enfrentando o mesmo problema aqui com jquery as requisições são bem sucedidas mas quando eu envio o req com axios obtendo o problema do cors.
Meu pedido--

      .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',
        // }
      })

estes são os cabeçalhos de resposta do servidor e minha origem locahost é permitida, os cabeçalhos que estou enviando são permitidos e os métodos também.

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

Foi assim que eu tive que formatar minha solicitação 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);
    })

Obrigado, salvou meu dia! Trabalhou para mim