CORS问题与Vue.js

的Vue 2.0.3
VUE路由器2.0.1
vuex 0.8.2
VUE资源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子模块I令牌检查登录身份验证有只是一个简单的头检查状态。

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，但没有帮助的情况下。

有什么想法？我在做什么错误..我想这不适用于其他电话，如果它不适合登录。

来源

2016-11-29 desicne

这似乎不是一个CORS问题（如415错误所示），并且您的客户端代码没有任何问题。您能否提供您的后端的关键代码片段？ –

你是完全正确的！我的问题是API项目不允许从JS内部浏览器访问 – desicne

更大的可能性是CORS未在IIS上启用。

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

</system.webServer> 
</configuration>

注意：这可以通过修改应用程序根目录下的web.config文件中的IIS如下启用此方法将允许任何人以到达终点的API，因此不应该通过的生产环境，但仅限于开发环境。

来源

2016-11-29 10:35:31

虽然您可以将Access-Control-Allow-Origin: *添加到您的服务器响应（在这种情况下，IIS），但这是非常不利的。

这里发生的事情是，你客户是http://localhost，它正试图访问https://mywebsite/api/这意味着它们来自同一个起源

不是如果添加Access-Control-Allow-Origin: *你将被允许整个世界击中你的API端点。

我建议让您的访问控制服务器头Access-Control-Allow-Origin: *.mysite并进行虚拟主机为您localhost使用dev.mysite或相似。

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

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

因此，简而言之，请为您的本地主机创建一个与您的REST服务处于相同域的虚拟主机，并解决您的问题。

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

祝你好运！

来源

2016-11-29 11:32:15

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。

来源

2017-07-13 13:20:39 Nickensoul

CORS问题与Vue.js

回答

相关问题