Vue.js 的 CORS 问题

Question

我正在使用：

• Vue 2.0.3
• vue-router 2.0.1
• vuex 0.8.2
• vue-resource 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，但没有帮助。

有什么想法吗？我做错了什么..我想如果它不适用于登录，它也不适用于其他调用。

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/。

您可以在此处阅读全文： How to deal with CORS error on Vue CLI 3?

Answer 2

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

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

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

我建议将您的访问控制 server 标头设置为 Access-Control-Allow-Origin: *.mysite，并为您的 localhost 创建一个虚拟主机以使用 dev.mysite 或类似名称。

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

您也可以将localhost 添加到白名单中，但这也并非没有其自身的安全隐患，而且还是doesn't work everywhere。

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

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

祝你好运！

Answer 3

1) 确保 server 发送 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 端点，因此不应在生产环境中采用，而应仅在开发环境中采用。

Answer 5

你需要一个 vue.config.js 文件在你的项目的根目录和你需要在一个 devServer 对象中定义你的代理的 vue.config 文件里面 module.exports = { devServer: { proxy: 'https://exampledomain.com/api/'}};。在您的 axios.post 中，您现在只需执行 https://exampledomain.com/api/login

即可提出请求

Answer 6

只需将这些附加到您所有 API 的响应中

res.header('Access-Control-Allow-Origin','*');

res.header('Access-Control-Allow-Methods','GET, POST, OPTIONS, PUT, PATCH, DELETE');

res.header('Access-Control-Allow-Headers','Origin,Content-Type,X-Requested-With,Accept,Authorization');