CORS与Vue.js的问题
我在用：
- Vue 2.0.3
- vue-路由器2.0.1
- vuex 0.8.2
- vue-资源0.7.0
在尝试使用远程API (而不是本地运行的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子模块中通过令牌登录时，我只有一个简单的头检查状态。
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，但没有帮助这个案例。
有什么想法吗？我做错什么了。我想如果它不适用于登录，它也不会对其他调用起作用。
回答 5
Stack Overflow用户
发布于 2019-04-07 10:40:00
当API url和客户端url不一样时，您将面临此错误。Vue CLI 3(以及它的核心，Webpack)允许您将API url代理到客户端url。
在vue.config.js文件中添加以下行：
// vue.config.js
module.exports = {
// options...
devServer: {
proxy: 'https://mywebsite/',
}
}然后将ajax调用发送到http://localhost/api/。
您可以在这里阅读全文：如何处理Vue CLI 3上的CORS错误？
Stack Overflow用户
发布于 2017-07-13 13:20:39
1)确保服务器发送Access-Control-Allow-Origin "*"头。
2)在客户端请求中不需要Vue.http.headers.common['Access-Control-Allow-Origin'] = true、Vue.http.headers.common['Access-Control-Allow-Origin'] = '*'等。
3)如果1点和2点已经可以，Vue.http.options.emulateJSON = true应该会有所帮助，但是vue资源在status 0中失败了。此外，尝试删除(如果存在) Vue.http.options.credentials = true和Vue.http.options.emulateHTTP = true。
Stack Overflow用户
发布于 2016-11-29 11:32:15
虽然您可以将Access-Control-Allow-Origin: *添加到服务器响应(在本例中是IIS)，但建议您不要这样做。
这里发生的情况是，您的客户是http://localhost，它试图访问https://mywebsite/api/，这意味着它们来自不同的来源
如果您添加Access-Control-Allow-Origin: *，您将允许整个世界到达您的API端点。
我建议将您的访问控制服务器头设置为Access-Control-Allow-Origin: *.mysite，并为您的localhost制作一个vhost，以便使用dev.mysite或类似的文件。
这将允许您的"localhost“访问您的API没有问题。
您也可以将localhost添加到白名单中，但这也不是没有它本身的安全含义，而且它无论如何都是并不是到处都有用。
因此，简而言之，为您的本地主机创建一个vhost，它与您的REST服务位于同一个域中，您的问题应该得到解决。
一旦你活下来，你应该删除*.mysite部件，并在你的白名单上使用尽可能特定的域。
祝好运!
https://stackoverflow.com/questions/40863417
复制相似问题
腾讯云开发者
