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

回答

相關問題