与Vue.js的CORS问题

Posted 2021-04-04

我正在使用：

• 查看2.0.3
• vue router 2.0.1
• 0.8.2 vuex
• view-resource 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子模块中的令牌检查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，但没有帮助。

任何的想法？我做错了什么..我认为如果它不适用于登录，它也不适用于其他电话。

答案

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

这里发生的是你的客户是http://localhost并且它正在尝试访问https://mywebsite/api/，这意味着他们不是来自同一个地方

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

我建议你的访问控制服务器头Access-Control-Allow-Origin: *.mysite和你的localhost使用dev.mysite或类似的vhost。

这将允许您的“localhost”访问您的API而不会出现问题。

您也可以将localhost添加到白名单中，但这也不是没有自己的安全隐患，而且无论如何都是doesn't work everywhere。

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

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

祝好运！

另一答案

更大的可能性是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端点，因此不应在生产环境中采用，而应仅在开发环境中采用。

另一答案

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。

另一答案

或者您可以使用chrome CORS扩展来绕过它以进行开发。使用codesandbox

另一答案

当API网址和客户端网址不相同时，您将面临此错误。 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?