Vue.js的CORS问题

Question

我正在使用：

• Vue 2.0.3
• Vue路由器2.0.1
• vuex 0.8.2
• vue资源0.7.0

在尝试使用远程API而不是本地运行的API登录到我的页面后，出现以下错误提示：

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

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在此处添加内容，但没有帮助该案例。

任何的想法？我在做什么错..我想如果它对登录无效，那么它也将无法用于其他呼叫。

Answer 1

当 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 错误？

Answer 2

虽然您可以添加Access-Control-Allow-Origin: *到您的服务器响应（在本例中为 IIS），但强烈建议不要这样做。

这里发生的事情是您的客户正在http://localhost尝试访问https://mywebsite/api/，这意味着他们不是来自同一来源

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

我建议制作您的访问控制服务器标头Access-Control-Allow-Origin: *.mysite并制作一个 vhost 供您localhost使用dev.mysite或类似。

这将允许您的“本地主机”毫无问题地访问您的 API。

您也可以添加localhost到白名单中，但这也并非没有其自身的安全隐患，而且无论如何它都无法在任何地方工作。

因此，简而言之，为与 REST 服务位于同一域中的本地主机创建一个虚拟主机，您的问题应该得到解决。

上线后，您应该删除该*.mysite部分并在白名单中使用尽可能具体的域。

祝你好运！

Answer 3

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.

Answer 4

更大的可能性是IIS上没有启用CORS。可以通过修改 IIS 中应用程序根文件夹中的 web.config 文件来启用此功能，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
   <httpProtocol>
         <customHeaders>
           <add name="Access-Control-Allow-Origin" value="*" />
         </customHeaders>
   </httpProtocol>

</system.webServer>
</configuration>

注意：此方法将允许任何人到达 API 端点，因此不应在生产环境中采用，而只能在开发环境中采用。