[問題解決] クロスドメイン画像のクロスドメインの問題は、CORS ポリシー No-Access-Control-Allow-Origin によってブロックされています

記事ディレクトリ

- CORS クロスドメイン
- 解決

このブログの環境背景: JAVA プロジェクトでは、フロントエンドとバックエンドの共同デバッグ中に画像にクロスドメインの問題があり、エラーは CORS ポリシー No-Access-Control-Allow によってブロックされています。 -起源。

CORS クロスドメイン

CORS は W3C 標準であり、正式名は「Cross-origin resource Sharing」です。

これにより、ブラウザーが XMLHttpRequest リクエストをクロスオリジンサーバーに発行できるようになり、AJAX は同じオリジンからのみ使用できるという制限が克服されます。これは、Ajax リクエストに対する制限です。CORS には、静的リソースに対するクロスドメイン制限はありません。

クロスドメインの問題の一般的な状況:
1. ドメイン名が異なる www.baidu.com と www.qq.com
2. ポートが異なる www.baidu.com:8080 と www.baidu.com:8081
3.第 2 レベルのドメイン名は異なります test.baidu.com と other.baidu.com
4. http と https

解決

クロスドメインの問題は実際には非常に一般的であり、CorsConfig 構成クラスを直接追加できます。ブラウザはリクエストにヘッダー情報を含めます。これを使用してクロスドメインを許可するかどうかを決定し、この情報をリクエストヘッダーに追加します。これはフィルターを使用して直接行うことができます。

Access-Control-Allow-Origin: クロスドメインに許可されるドメイン名、特定のドメイン名または * (任意のドメイン名を表す) Access-Control-Allow-
Credentials: Cookie の送信を許可するかどうか。デフォルト、CORS は Cookie を伝送しないため、この値を true に設定する必要があります。

これは、すべてのリクエストを同時にインターセプトし、CorsFilter を使用してクロスドメインロジックを実装し、最後に新しい CorsFilter を返すことと同じです。
CorsFilter は、SpringMVC がカプセル化した CORS のクロスドメインフィルターで、http リクエストに含まれる決定ロジックを内部的にカバーします。

@Configuration
public class CorsConfig {
    
    
    @Bean
    public CorsFilter corsFilter() {
    
    
		//创建一个可添加CORS配置信息  
        CorsConfiguration config = new CorsConfiguration();
        //允许的域，若使用addAllowedOrigin("*");会导致cookie失效，要将*换成域名
        config.addAllowedOriginPattern("*");
        //是否发送cookie信息
        config.setAllowCredentials(true);
        //允许的请求方式
        config.addAllowedMethod("*");
        //允许的头信息
        config.addAllowedHeader("*");

		//添加映射路径，这儿拦截所有请求
        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config);

        return new CorsFilter(configSource);
    }
}

参考：https://zhuanlan.zhihu.com/p/66484450
https://zhuanlan.zhihu.com/p/121042077