与Vue.js的CORS问题 [英] CORS issue with Vue.js

问题描述

我正在使用：

• Vue 2.0.3


• vue-router 2.0。 1


• vuex 0.8.2


• vue-resource 0.7.0

• Vue 2.0.3
• vue-router 2.0.1
• vuex 0.8.2
• vue-resource 0.7.0

在使用远程API时尝试登录我的页面，而不是本地运行的，我得到的错误如下：

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子模块中通过令牌登录时检查auth我有
只是一个简单的标头检查状态。

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.

推荐答案

虽然您可以将 Access-Control-Allow-Origin：* 添加到您的服务器响应（在本例中为IIS），但我们非常建议反对。

While you can add Access-Control-Allow-Origin: * to your server response (in this case IIS) but this is very much advised against.

这里发生的事情是您的客户端是 http：// localhost 它试图访问 https：// mywebsite / api / 这意味着它们不是来自同一个来源

What's happening here is that your client is http://localhost and it is trying to access https://mywebsite/api/ which means they're not from the same origin

如果添加 Access-Control-Allow-Origin：* ，您将允许整个世界访问您的API端点。

If you add Access-Control-Allow-Origin: * you will be allowing the entire world to hit your API endpoint.

我建议您设置访问控制服务器标头 Access-Control-Allow-Origin：* .mysite 并为你的 localhost 制作一个vhost，以使用 dev.mysite 或类似的。

I'd suggest making your access control server headers Access-Control-Allow-Origin: *.mysite and make a vhost for your localhost to use dev.mysite or similar.

这将允许您的localhost无问题地访问您的API。

This will allow your "localhost" to access your API without issues.

Y你也可以将 localhost 添加到白名单中，但这也不是没有安全隐患，而是无论如何都无法在任何地方工作。

You could also add localhost to a whitelist, but this is also not without its own security implications, and it doesn't work everywhere anyway.

所以，简而言之，为你的本地主机创建一个vhost，它与你的REST服务位于同一个域中，你的问题应该得到解决。

So, in short, make a vhost for your localhost that's in the same domain as your REST service and your issue should be resolved.

一旦你上线，你应该删除 *。mysite part并在白名单中尽可能使用特定的域名。

Once you go live you should remove the *.mysite part and use as specific a domain as possible on your whitelist.

祝你好运！

这篇关于与Vue.js的CORS问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！