Problema do CORS com o Vue.js
Estou a usar:
Vue 2.0.3vue-router 2.0.1vuex 0.8.2vue-resource 0.7.0E depois de tentar acessar minha página ao usar a API remota, não a executada localmente, recebo o erro cors como a seguir
vue-resource.common.js?2f13:1074 OPTIONS
https://mywebsite/api/auth/login
(anonymous function) @ vue-resource.common.js?2f13:1074
Promise$1 @ vue-resource.common.js?2f13:681
xhrClient @ vue-resource.common.js?2f13:1033
Client @ vue-resource.common.js?2f13:1080
(anonymous function) @ vue-resource.common.js?2f13:1008
XMLHttpRequest cannot load https://mywebsite/api/auth/login.
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. The response had HTTP status code 415.
Agora eu tenho a API em execução no Azure e, uma vez que me permite testar minhas chamadas do Postman, tenho certeza de que os cabeçalhos do CORS estão definidos corretamente no back-end. Não tenho tanta certeza sobre o Vue e a frente.
Eu tenho uma situação como esta nos arquivos de configuração:
export const API_ROOT = 'https://mywebsite/api/'
export const AuthResource = Vue.resource(API_ROOT + 'auth{/action}')
do que, por exemplo, estou chamando esta ação como:
login: function (userData) {
return AuthResource.save({action: 'login'}, userData)
}
Finalmente, como eu estou verificando a autenticação no login via token no submodule vuex, tenho apenas um estado simples de verificação de cabeçalho.
var updateAuthHeaders = () => {
var token = JSON.parse(localStorage.getItem("auth_token"))
if (token != null){
Vue.http.headers.common['Authorization'] = token
}else{
Vue.http.headers.common['Authorization'] = null
}
}
Eu tentei adicionarVue.http.headers.common['Access-Control-Allow-Origin'] = true
aqui, mas não ajudou o caso.
Qualquer ideia? O que estou fazendo de errado? Suponho que não funcionará para outras chamadas também se não funcionar para o login.