7

Estou tentando fazer a requisição para uma API, usando Axios:

  axios.post('http://api.teste.com.br/v1/getToken', {
      withCredentials: true,
      auth: {
          username: 'usuario',
          password: 'password'
      },
      headers: {                  
          "Access-Control-Allow-Origin": "*",
          "Access-Control-Allow-Headers": "Authorization", 
          "Access-Control-Allow-Methods": "GET, POST, OPTIONS, PUT, PATCH, DELETE" ,
          "Content-Type": "application/json;charset=UTF-8"                   
      },
  }).then(resp => {  
    console.log(resp)
  })
  .catch(error => {          
      console.log(error)       
  })

Mas sempre apresenta o erro:

Access to XMLHttpRequest at 'http://api.teste.com.br/v1/getToken' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

Existe alguma configuração a mais para fazer? Lembrando que é uma API de terceiros e eu não posso alterar o CORS no servidor, e no PostMan funciona sem problemas.

11
  • Você está chamando axios.post(), não seria axios.get()? Commented 12/12/2018 às 13:08
  • Eu também achei estranho mais esta como post na documentação da API. Commented 12/12/2018 às 13:16
  • Provavelmente a API não aceita o valor informado no "Content-Type". Commented 12/12/2018 às 13:20
  • Sua api é em que?
    – Sorack
    Commented 12/12/2018 às 13:21
  • a api é de terceiros, não sei qual a linguagem ela foi desenvolvida. Mais no postman eu passo o "Content-Type" como application/json e funciona. Commented 12/12/2018 às 13:25

4 Respostas 4

4

Tive o mesmo problema com uma API de terceiros. Demorei para pensar mais é simples. Você só pode acessar a api no Back-end. Se for no front-end dá erro. No seu WebService acesse a API de terceiros. Adicionei o CORS para autorizar.

Exemplo para criar uma API em Node.js:

const express = require('express')
const axios = require('axios')
const app = express()
const cors = require('cors')

app.listen(3333)

app.use(cors())
app.get('/sms', (req,res)=>{   
     
    axios.post('https://apideterceiros/api',{    
        
            user: '1234',
            contact: [
              {
                number: '534543543',
                message: 'test message 1',
                externalid: '123456'
              }
            ],
            type: '2'      
    }).then(function(response){
        console.log(response.data)
        console.log(response.headers)
        console.log(response.status)
    }).catch(function(error){
        if(error){
            console.log(error)
        }
    })
    
    return res.json({teste:1})
}) 
2
2

O que aconteceu foi o seguinte:

  1. A aplicação tentou fazer uma requisição POST para um server com outro hostname.
  2. O browser identificou o método POST para outro host; de acordo com a especificação, isso significa que é uma requisição CORS que precisa de um pre-flight request.
  3. O browser fez o pre-flight request, que é uma requisição OPTION que verifica se o request original será aceito pelo server, mandando os headers desse request original assim como definidos no código da pergunta (ps: os headers Access-Control-* é respondido pelo server, o client não precisa enviá-los).
  4. O server recebeu o pre-flight e respondeu com os Headers que ele aceita.
  5. O browser identificou na resposta que o request original não será permitido, pois o Header Content-Type não estava entre os aceitos e crashou antes de fazê-lo.

A solução para esse problema é verificar a documentação da api que você está utilizando para verificar os headers. Creio que por ser uma requisição que usa HTTP Authentication, não precisa enviar o Content-Type application/json.

Não se esqueça de remover os headers Access-Control-*. Esses headers são respondidos pelo server para atender a especificação do CORS.

Se quiser mais detalhes sobre o funcionamento do CORS, essa documentação da Mozilla é muito boa.

-2

Boa tarde!

Problema solucionando. Eu criei um proxy no arquivo package.json

"proxy": "http://api.teste.com.br/v1" e fiz a requisição assim:

 axios.post('http://localhost:3000/getToken',  {username : "user", password : "password"})
  .then(resp => {  
      console.log(resp.data.data.authorization)
  })
  .catch(error => {          
      console.log(error)       
  })

Desta maneira o proxy meio que engana o CORS e não tem mais problemas.

-2

Tive o mesmo problema, no fim é só usar a lib https://www.npmjs.com/package/cors.

Bem simples de implementar e vai resolver seu problema, cuidado apenas no ambiente de produção para não deixar tudo liberado, com essa lib você pode liberar tudo ou algumas coisas apenas, vale a pena dar uma lida nela.

Espero ter ajudado quem chegou até aqui.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .