Vue.js 的 CORS 問題

Question

我正在使用：

• Vue 2.0.3
• Vue 路由器 2.0.1
• Vuex 0.8.2
• Vue 資源 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添加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並為您的localhost主機創建一個 vhost 以使用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'] = '*'等等t 在客戶端請求中需要。

3) Vue.http.options.emulateJSON = true如果 1 點和 2 點已經沒問題，應該會Vue.http.options.emulateJSON = true幫助，但 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 文件中使用 vue.config.js 文件，您需要在 devServer 對象module.exports = { devServer: { proxy: 'https://exampledomain.com/api/'}}; . 在您的 axios.post 中，您現在只需執行https://exampledomain.com/api/login即可發出請求

Answer 6

或者您可以使用chrome CORS擴展來繞過它以進行開發。 使用codesandbox

Answer 7

只需將這些附加到您所有 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');