CORS问题与Vue.js
我使用:CORS问题与Vue.js
- 的Vue 2.0.3
- VUE路由器2.0.1
- vuex 0.8.2
- VUE资源0.7.0
,并试图使用远程API的时候,而不是在本地运行一个,我得到CORS错误,如以下
登录到我的网页后,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和前台。
我有这样的情况,配置文件:
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子模块I令牌检查登录身份验证有 只是一个简单的头检查状态。
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
,但没有帮助的情况下。
有什么想法?我在做什么错误..我想这不适用于其他电话,如果它不适合登录。
更大的可能性是CORS未在IIS上启用。
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>
注意:这可以通过修改应用程序根目录下的web.config文件中的IIS如下启用此方法将允许任何人以到达终点的API,因此不应该通过的生产环境,但仅限于开发环境。
虽然您可以将Access-Control-Allow-Origin: *
添加到您的服务器响应(在这种情况下,IIS),但这是非常不利的。
这里发生的事情是,你客户是http://localhost
,它正试图访问https://mywebsite/api/
这意味着它们来自同一个起源
不是如果添加Access-Control-Allow-Origin: *
你将被允许整个世界击中你的API端点。
我建议让您的访问控制服务器头Access-Control-Allow-Origin: *.mysite
并进行虚拟主机为您localhost
使用dev.mysite
或相似。
这将允许您的“本地主机”访问您的API没有问题。
您也可以将localhost
添加到白名单中,但这也不是没有它自己的安全隐患,而且它无论如何都是doesn't work everywhere。
因此,简而言之,请为您的本地主机创建一个与您的REST服务处于相同域的虚拟主机,并解决您的问题。
一旦上线,您应该删除*.mysite
部分,并在您的白名单上尽可能使用特定域名。
祝你好运!
1)确保服务器发送Access-Control-Allow-Origin "*"
标头。
2)Vue.http.headers.common['Access-Control-Allow-Origin'] = true
,Vue.http.headers.common['Access-Control-Allow-Origin'] = '*'
等在客户端请求中不需要。
3)Vue.http.options.emulateJSON = true
应该有帮助,如果1点和2点已经可以,但vue-resource失败status 0
。此外,尝试删除(如果它们存在)Vue.http.options.credentials = true
和 Vue.http.options.emulateHTTP = true
。
这似乎不是一个CORS问题(如415错误所示),并且您的客户端代码没有任何问题。您能否提供您的后端的关键代码片段? –
你是完全正确的!我的问题是API项目不允许从JS内部浏览器访问 – desicne