1

Estava consumindo dados de uma API utilizando XHR e estava funcionando muito bem, mas houve algumas mudanças no projeto e surgiu a necessidade de utilizar o Vue. Tentei realizar as mesmas requisições utilizando o Axios e logo depois o Vue Resource mas em ambos não tive sucesso.

Código utilizando XHR:

var data = JSON.stringify(false);
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.open("POST", "api/url");
xhr.send(data);
xhr.addEventListener("readystatechange", function () {
  if (this.readyState === this.DONE) {
    console.log(this.responseText);
  }
});

Código utilizando Axios:

axios({
  method: 'post',
  url: 'api/url',
  data: JSON.stringify(false),
  withCredentials: true
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Código utilizando Vue-resource:

  var data = JSON.stringify(false);
  this.$http.post("api/url", data, {
  headers: {
      credentials : true,
  }}).then(resp => console.log(resp));

Utilizando tanto Axios quanto Vue-resource tenho o seguinte erro:

"Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource."

Parece um problema de CORS.

1
  • 1
    A mensagem indica que sim. Se voce tem acesso a API, tente liberar o CORS nela.
    – BrTkCa
    27/12/2017 às 19:08

2 Respostas 2

1

Pelo erro, ele está conseguindo acessar a api mas é bloqueado pelo cors. Tem que ver essa questão na api, não no seu site

0

Você está tendo erro de CORS, que é um sistema de segurança que os navegadores utilizam.

CORS - Cross-Origin Resource Sharing (Compartilhamento de recursos com origens diferentes) é um mecanismo que usa cabeçalhos adicionais HTTP para informar a um navegador que permita que um aplicativo Web seja executado em uma origem (domínio) com permissão para acessar recursos selecionados de um servidor em uma origem distinta. Um aplicativo Web executa uma requisição cross-origin HTTP ao solicitar um recurso que tenha uma origem diferente (domínio, protocolo e porta) da sua própria origem.

Pode ser que a documentação oficial te ajude a entender melhor o erro.

https://developer.mozilla.org/pt-BR/docs/Web/HTTP/CORS

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 .