Vue.js 的 CORS 问题 [英] CORS issue with Vue.js
问题描述
我正在使用:
- Vue 2.0.3
- vue-router 2.0.1
- vuex 0.8.2
- vue 资源 0.7.0
并且在使用远程 API 而非本地运行 API 时尝试登录我的页面后,出现如下 cors 错误
And after trying to login to my page when using remote API, not the locally run one, I get cors error like following
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.
现在我在 Azure 中运行了 API,并且由于它允许我测试来自 Postman 的调用,我非常确定在后端正确设置了 CORS 标头.对 Vue 和前端不太确定.
Now I have API running in Azure, and since it allows me to test my calls from Postman, I am quite sure the CORS headers are set properly on backend. Not so sure about the Vue and the front.
我在配置文件中有这样的情况:
I have situation like this in config files:
export const API_ROOT = 'https://mywebsite/api/'
export const AuthResource = Vue.resource(API_ROOT + 'auth{/action}')
比即我称这个动作为:
login: function (userData) {
return AuthResource.save({action: 'login'}, userData)
}
最后,当我通过 vuex 子模块中的令牌检查登录身份验证时,我有只是一个简单的头部检查状态.
Finally as I am checking auth in login via token in vuex submodule I have just a simple header check-up state.
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
}
}
我尝试在此处添加 Vue.http.headers.common['Access-Control-Allow-Origin'] = true
,但没有帮助.
I have tried adding Vue.http.headers.common['Access-Control-Allow-Origin'] = true
here, but did not help the case.
有什么想法吗?我做错了什么..我想如果它不适用于登录,它也不适用于其他调用.
Any idea? What am I doing wrong.. I suppose it will not work for other calls also if it doesn't work for login.
推荐答案
当 API url 和客户端 url 不相同时,您会遇到此错误.Vue CLI 3(以及它的核心是 Webpack)允许您将 API url 代理到客户端 url.
You face this error when the API url and client url aren't the same. Vue CLI 3 (and in the core of it, Webpack) allows you to proxy your API url to your client url.
在 vue.config.js
文件中添加以下几行:
Inside vue.config.js
file add following lines:
// vue.config.js
module.exports = {
// options...
devServer: {
proxy: 'https://mywebsite/',
}
}
然后将您的 ajax 调用发送到 http://localhost/api/
.
And then send your ajax calls to http://localhost/api/
.
您可以在此处阅读全文:如何处理CORSVue CLI 3 上的错误?
You can read the full article here: How to deal with CORS error on Vue CLI 3?
这篇关于Vue.js 的 CORS 问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!