逆瀏覽器請求之JS跨域訪問

禁用跨域訪問是瀏覽器保證安全訪問的一項重要策略限制，不少跨域訪問的操做都是違逆瀏覽器標準的。在一些場合不得不又須要用到，則本文大體說明下，在Nginx做爲服務端是如何解決跨域訪問。

參數解釋

一些主要的跨域參數

Access-Control-Allow-origin # 受權容許來源
Access-Control-Allow-Methods # 受權容許方法
Access-Control-Allow-Headers # 受權容許請求頭
Access-Control-Expose-Headers # 可公開響應頭
Access-Control-Allow-Credentials # 容許認證 即開放cookie

 

容許帶cookie訪問的配置

解釋以下配置，容許 http://localhost:8080 整個來源進行訪問。

Access-Control-Allow-Origin 支持 *，支持多個域名配置如："http://localhost:8080,http://localhost:8081"，用逗號進行隔開。

但此處由於有容許進行認證（受權cookie），即Origin不支持 * 也不支持多個域名配置，僅支持單項域名配置。

Access-Control-Allow-Methods 容許GET,POST,OPTIONS請求訪問，若是想要支持其餘請求將其加入其中。OPTIONS是預檢請求，跨域中必需要將其開放。

Access-Control-Allow-Headers 容許客戶端傳遞的header參數，若是客戶端傳遞的header不在其中，則請求會失敗。如需經過Authorization進行校驗用戶身份，則將Authorization配置到請求頭。

一樣，服務端如要返回其餘響應頭給客戶端，也需指定，經過Access-Control-Expose-Headers配置，支持逗號隔開多個參數。

Access-Control-Allow-Credentials 容許受權cookie，容許必須爲true，不然其它即禁用。

add_header Access-Control-Allow-Origin "http://localhost:8080";
		add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
		add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
		add_header Access-Control-Expose-Headers 'Authorization';
		add_header Access-Control-Allow-Credentials 'true';

 

容許任何域名帶cookie訪問

此操做安全極低，如須要可以下配置。

set $origin $http_origin;
if ( $origin = '' ) {
	set $origin "$scheme://$host:$server_port";
}
add_header Access-Control-Allow-Origin "$origin";