クロスドメイン
クロスドメインは、リソース共有のためのセキュリティ制限メカニズムです。
クロスドメイン: クロスドメインとは、ブラウザーが他の Web サイトからスクリプトを実行できないことを意味します。これは、ブラウザーの同一生成元ポリシーによって引き起こされ、JavaScript に対してブラウザーによって課されるセキュリティ制限です。
同一オリジン ポリシー: プロトコル、ドメイン名、ポートが同じである必要があることを意味します。これらに相違があるとクロスドメインが発生します。
例：
| URL | 説明する | クロスドメインを許可するかどうか |
|---|---|---|
| http://www.a.com/a.js http://www.a.com/b.js |
同じドメイン名の下で | 許可する |
| http://www.a.com/lab/a.js http://www.a.com/script/b.js |
同じドメイン名の異なるフォルダー | 許可する |
| http://www.a.com:8000/a.js http://www.a.com/b.js |
同じドメイン名、異なるポート | 禁じられている |
| http://www.a.com/a.js https://www.a.com/b.js |
同じドメイン名、異なるプロトコル | 禁じられている |
| http://www.a.com/a.js http://70.32.92.74/b.js |
ドメイン名とそのドメイン名に対応するIP | 禁じられている |
| http://www.a.com/a.js http://script.a.com/b.js |
メインドメインは同じですが、サブドメインが異なります | 禁じられている |
| http://www.a.com/a.js http://a.com/b.js |
同じドメイン名、異なる第 2 レベル ドメイン名 (上記と同じ) | 許可されません (この場合、Cookie へのアクセスは許可されません) |
| http://www.a.com/a.js http://a.com/b.js |
異なるドメイン名 | 禁じられている |
プリフライト要求オプション: サーバー応答でクロスドメインが許可されているかどうかをサーバーに問い合わせ、実際の要求をサーバーに送信すると、サーバーはデータで応答します。
クロスドメインを解決する
1. nginx を使用して同じドメインにデプロイする
たとえば、nginx サーバーを使用し、すべてのフロントエンド プロジェクトをそこにデプロイし、バックエンド ゲートウェイもデプロイします。
このように、アクセスリクエストはすべてnginxアドレスになります。
静的リクエスト: http://nginx/xxx
動的リクエスト: http://nginx/api/xxx がゲートウェイに転送される
こうすれば、クロスドメインの問題は発生しません
2. クロスドメインリクエストを許可するように現在のリクエストを設定します。
-
レスポンスヘッダーを追加可能
Access-Control-Allow-Origin は、どのソースからのクロスドメイン要求をサポートしますか
Access-Control-Allow-Methods クロスドメインをサポートするメソッド
Access-Control-Allow-Credentials クロスドメイン要求にはデフォルトでは Cookie が含まれません。Cookie を含めるには true に設定します。
クロスドメイン要求によって公開される Access-Control-Allow-Headers フィールド
Access-Control-Max-Age は応答の有効時間を示します
トラブル
2. ゲートウェイ内で統一設定も可能
トラブルを避けるために設定ファイルを使用する
package com.atguigu.gulimall.gateway.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.reactive.CorsWebFilter;
import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource;
@Configuration
public class GulimallCorsConfiguration {
@Bean
public CorsWebFilter corsWebFilter(){
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration corsConfiguration = new CorsConfiguration();
//1.配置跨域
corsConfiguration.addAllowedHeader("*");
corsConfiguration.addAllowedMethod("*");
corsConfiguration.addAllowedOrigin("*");
corsConfiguration.setAllowCredentials(true);//允许cookie
source.registerCorsConfiguration("/**", corsConfiguration);
return new CorsWebFilter(source);//过滤器 解决跨域问题
}
}コンテンツは Guli Mall プロジェクト、bilibili から編集されています。