セキュリティ上の理由から、最新のブラウザはHTTPリクエストを行うときに同一生成元ポリシーに準拠する必要があります。それ以外の場合、これらはクロスドメインHTTPリクエストであり、デフォルトで禁止されています。IP(ドメイン名)が異なるか、ポートが異なります。また、プロトコルが異なる(HTTP、HTTPSなど)と、クロスドメインの問題が発生します。
一般的なフロントエンドソリューションは次のとおりです。
①JSONPを使用してクロスドメインリクエストをサポートするクロスドメインリクエストを実現するためのJSONPの原則は、単純に動的な作成です
②リアクションプロキシメカニズムを使用して、クロスドメインの問題を解決します。フロントエンドが要求すると、最初に同じ送信元アドレスのバックエンドに要求が送信され、クロスドメインアクセスを回避するためにバックエンド要求が転送されます。 。
その後、HTML5はCORSプロトコルをサポートしました。CORSはW3C標準であり、フルネームは「クロスオリジンリソースシェアリング」(クロスオリジンリソースシェアリング)であり、ブラウザーがXMLHttpRequestリクエストをクロスオリジンサーバーに送信できるようにすることで、AJAXは同じオリジンサーバーからのみ使用できるという制限を克服します。ソース。特別なヘッダー[Access-Control-Allow-Origin]をサーバーに追加して、クロスドメインの制限についてクライアントに通知します。ブラウザーがCORSをサポートし、Originが渡されたと判断した場合、XMLHttpRequestがクロスドメインリクエストを開始できるようになります。 。
フロントエンドはCORSプロトコルを使用し、バックエンドは非同一生成元要求をサポートする必要があります。SpringBootで非同一生成元要求のサポートを設定するには、2つの方法があります。
まず、CorsFilterを構成します。
@Configuration
public class GlobalCorsConfig {
@Bean
public CorsFilter corsFilter() {
CorsConfiguration config = new CorsConfiguration();
config.addAllowedOrigin("*");
config.setAllowCredentials(true);
config.addAllowedMethod("*");
config.addAllowedHeader("*");
config.addExposedHeader("*");
UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
configSource.registerCorsConfiguration("/**", config);
return new CorsFilter(configSource);
}
}
上記のコードを構成する必要があります。2番目の方法は少し簡単です。
次に、スタートアップクラスに追加します。
public class Application extends WebMvcConfigurerAdapter {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowCredentials(true)
.allowedHeaders("*")
.allowedOrigins("*")
.allowedMethods("*");
}
}