Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

Access-Control-Request-Method

Bom dia estou tentndo criar uma aplicação em vue.js conforme vi aqui no curso(para ver se aprendi de fato =D ), mas quando tento buscar as informações com a aplicação do backend aparece a segunte mensagem " vue-resource.es2015.js?fc90:1078 Refused to set unsafe header "Access-Control-Request-Method"

o codigo e semelhante ao do professor a diferença e no backend que é em .net

 created() {
        this.$http.get('http://localhost:51000/Imovel/Listar' )
            .then(res => res.json())
            .then(imoveis => this.imoveis = imoveis, err => console.log(err));
    }

então alguem sabe como solucionar esse problema ? =D

6 respostas

Olá, Filipe.

Você pode me mandar o retorno que API está te dando nessa roda: http://localhost:51000/Imovel/Listar.

Por favor, só faça essa requisição pelo browser e cole aqui o que ele te passar como resposta :-)

solução!

Seu backend precisa suportar CORS. É algo relacionado ao seu backend e não problema no Vue.js. Da um conferida como habilitar no seu backend preferido.

Obrigado por responder Marco =D

Bom... quando eu faço a requisição diretamente pelo navegador tudo ocorre como esperado eu recebo o Json

mas quando tento fazer pelo $http apresenta as seguintes mensagems

vue-resource.es2015.js?fc90:1078 Refused to set unsafe header "Access-Control-Request-Method"

seguida de

XMLHttpRequest cannot load http://localhost:51000/Imovel/Listar. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

e por ultimo o objeto que é impresso na tela

Response {url: "http://localhost:51000/Imovel/Listar", ok: false, status: 0, statusText: "", headers: Headers…}

Andei pesquisando falaram que é por causa do CROSS

eu alterei o código para

this.$http.get('http://localhost:51000/Imovel/Listar?',{
            headers: {
                'Access-Control-Allow-Origin': 'http://localhost:51000/',
                'Access-Control-Request-Method': 'GET',
                'Accept':'*'
            }
        })
            .then(res => res.json())
            .then(imoveis => this.imoveis = imoveis, err => console.log(err));

.... mas nada mudou, o erro continua o mesmo =/

É isso mesmo cara o CORS é a solução.

Se não quiser fazer na mão e estiver usando o express você pode usar esse middleware: https://www.npmjs.com/package/cors

Obrigado pela dica do middleware usarei na proxima =D A solução que usei foi a do professor Flavio, modifiquei o backend para poder aceitar o CORS

Notícia boa! Sucesso e bom estudo meu aluno!