クロスドメインとnginx実現
萼のクロスドメインは何ですか
簡単に言えば、ブラウザはwww.xxxxcomページで別のURLにアクセスしました.
例えばブラウザページhttps://www.baidu.com時刻
私たちは以下のurlを訪問しました.
http://www.baidu.com
https://api.baidu.com
https://www.baidu.com:9999
同前
普通の話に聞こえますが、なぜわざわざ「実現」に行きますか?
これはブラウザのソースポリシーです.
ブラウザのソースポリシーは、異なるソースからの「document」またはスクリプトを制限し、現在の「document」に対していくつかの属性を読み込みまたは設定します.フィールドから読み込まれたスクリプトは、他のフィールドのドキュメント属性にアクセスすることができません.
湖南省にまたがって実現する
皬サーバ端に要求ヘッドAccess-Coontrol-Originなどの要求ヘッドを設置する: Access-Coontrol-Allow-Origin: ドメインをまたぐアクセスを許可するドメインは、ドメインのリストであっても良いし、ワイルドカードの「*」であっても良いです.ここで注意したいのですが、Originルールはドメイン名のみに有効で、サブディレクトリには有効ではありません.すなわちhttp://baidu.com/subdir/ は無効です.しかし、サブドメインは別々に設定する必要があります.ここでのルールは、同ソースポリシー を参照することができます. Access-Coontrol-Alllow-Coredentials: 検証情報を要求することが許可されているかどうかは、以下に詳細に説明される. Access-Coontrol-Expose-Headers: スクリプトのアクセスを許可するリターンヘッドは、成功を要求した後、スクリプトがXMLHttpRequestでこれらのヘッダにアクセスすることができます. Access-Coontrol-Myx-Age: 今回要求した秒数をキャッシュします.この時間範囲では、全ての同タイプの要求は、プリチェック要求を送信せずに、今回のリターンヘッダを直接使用することを判断根拠として、非常に有用であり、要求回数を大幅に最適化する . Access-Coontrol-Alllow-Mottehods: 使用を許可する要求方法は、カンマで区切られた である. Access-Coontrol-Alllow-Headers: カスタムヘッドをカンマで区切ることができます.文字の大きさに敏感ではありません.
湖南省の安徽省にある地名
ドメイン間要求が発生した場合.
ブラウザは自動的に最初にOoptionsメソッドを送信します.
私達は専門的にoptionsに対して応答を求めて、ブラウザにドメインをまたいで訪問することができることを教えます. 同時にapiインターフェースを実行しないようにします.
注意する
Access-Coontrol-Allow-Originはすべてのドメインにアクセスできるように設定すると、すべての重要なリソースはセキュリティチェックを行う必要があります.
nginx配置ファイル
簡単に言えば、ブラウザはwww.xxxxcomページで別のURLにアクセスしました.
例えばブラウザページhttps://www.baidu.com時刻
私たちは以下のurlを訪問しました.
http://www.baidu.com
https://api.baidu.com
https://www.baidu.com:9999
同前
普通の話に聞こえますが、なぜわざわざ「実現」に行きますか?
これはブラウザのソースポリシーです.
ブラウザのソースポリシーは、異なるソースからの「document」またはスクリプトを制限し、現在の「document」に対していくつかの属性を読み込みまたは設定します.フィールドから読み込まれたスクリプトは、他のフィールドのドキュメント属性にアクセスすることができません.
湖南省にまたがって実現する
皬サーバ端に要求ヘッドAccess-Coontrol-Originなどの要求ヘッドを設置する:
湖南省の安徽省にある地名
ドメイン間要求が発生した場合.
ブラウザは自動的に最初にOoptionsメソッドを送信します.
私達は専門的にoptionsに対して応答を求めて、ブラウザにドメインをまたいで訪問することができることを教えます. 同時にapiインターフェースを実行しないようにします.
注意する
Access-Coontrol-Allow-Originはすべてのドメインにアクセスできるように設定すると、すべての重要なリソースはセキュリティチェックを行う必要があります.
nginx配置ファイル
server {
listen 5001;
server_name localhost;
#charset koi8-r;
#
access_log logs/host.access.log main;
location / {
# CORS
add_header 'Access-Control-Allow-Origin' $http_origin;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
if ($request_method = 'OPTIONS') {
return 204;
}
# proxy_set_header Host $host;
proxy_pass http://127.0.0.1:5000;
}
#...... ..........
}