Nginx解決CORS跨域解決方案

首先通讀下 mdn 關於 cors 的

定義，了解跨域的含義及簡單請求和複雜請求等的定義。文中的內容不贅述，現在說解決方案。

綜上，我們要解決兩個問題：

options 請求的正確響應

跨域請求正確響應

解決的方式有多種，既可以在web server解決，也可以在原始碼層解決。因為問題比較普遍，故我們選擇在web server解決，下面我們以 nginx 為例，說明解決方案。

假設訪問的位址為/example, nginx 配置如下:

location /example

location /example 

proxy_redirect off;
proxy_set_header host $host;
proxy_set_header x-real-ip $remote_addr;
proxy_set_header x-forwarded-for $proxy_add_x_forwarded_for;
proxy_pass 
}

新增允許源access-control-allow-origin為*(可根據業務需要更改)

新增快取時長access-control-max-age，當下次請求時，無需再傳送 options 請求

新增允許的方法，允許的首部

新增乙個內容長度為0，型別為text/plain; charset=utf-8, 返回狀態碼為204的首部

至此，完成 options 請求的正確響應。

新增如下內容:

}if ($http_origin ~* (https?://(.+\.)?(example\.com$))), 當 origin 為合法網域名稱(可根據業務調整或去除合法網域名稱驗證)時:

新增允許源access-control-allow-origin為$http_origin(可根據業務需要更改)

新增允許認證access-control-allow-credentials為true，允許接收客戶端cookie(可根據業務需要更改。 但要注意，當設定為true時，access-control-allow-origin不允許設定為*)

新增允許的方法，暴露的首部

至此，完成跨域請求正確響應。

以上，是對跨域請求在web server的解決方案，主要是通過響應options方法和新增允許源來解決。

當然，如果本地開發中，可以在利用webpack-dev-server的 proxy 選項來快速解決跨域問題：

示例如下：

// webpack.congf.js

module.exports = }}
}}

cors跨域請求並不魔幻，理解 cors 的含義，根據規則去找方法就迎刃而解了。希望能幫助到大家。

以上。

Nginx解決跨域問題 CORS

cors cross origin resource sharing 跨域資源共享,是一種允許當前域 domain 的資源 比如html js web service 被其他域 domain 的指令碼請求訪問的機制，通常由於同域安全策略 the same origin security policy...

跨域解決CORS

1.js跨域 js跨域是指通過js在不同的域之間進行資料傳輸或通訊，比如用ajax向乙個不同的域請求資料，或者通過js獲取頁面中不同域的框架中 iframe 的資料。只要協議 網域名稱 埠有任何乙個不同，都被當作是不同的域。localhost 9000中的ajax 向localhost 9001中的...

cors解決跨域

cors是乙個w3c標準，全稱是 跨域資源共享 cross origin resource sharing 它允許瀏覽器向跨源伺服器，發出xmlhttprequest請求，從而克服了ajax只能同源使用的限制。cors需要瀏覽器和伺服器同時支援。目前，所有瀏覽器都支援該功能，ie瀏覽器不能低於ie1...