フロントエンドとバックエンドのクロスドメインソリューション

1. クロスドメインの問題が発生する理由

跨域问题是由于浏览器的同源策略导致的。同一生成元ポリシーは、ある生成元のドキュメントまたはスクリプトが別の生成元のリソースと対話する方法を制限するセキュリティポリシーです。起源が同じとは、プロトコル、ドメイン名、ポート番号がすべて同じであることを意味します。たとえば、ページが http://www.example.com から JavaScript コードを読み込む場合、そのページは http://www.example.com と同じオリジンのリソースとのみ対話できますが、リソースとは対話できません。対話する他のドメイン名。

フロントエンドとバックエンドが分離されている開発モードでは、通常、フロントエンドコードは独立したドメイン名で実行され、バックエンドインターフェイスは別の独立したドメイン名で実行されます。現時点では、ブラウザーの同一オリジンポリシーの制限により、フロントエンドコードはバックエンドインターフェイスに直接アクセスできず、クロスドメインの問題が発生します。

たとえば、フロントエンドコードで Ajax を使用してバックエンドインターフェイスをリクエストする場合、フロントエンドコードとバックエンドインターフェイスが同じドメイン名の下にない場合、リクエストは失敗します浏览器就会阻止这种跨域请求。クロスドメインの問題を解決するには、JSONP、CORS、プロキシサーバー、その他のクロスドメインソリューションを使用するなど、ブラウザーの同一オリジンポリシーをバイパスする何らかの手段が必要です。

2. クロスドメインソリューションにはどのようなソリューションがありますか?

JSONP: フロントエンドページに script タグを追加し、別ドメイン名の JavaScript ファイルをロードします JSONP のコールバック関数はグローバルスコープで実行されるため、コールバック関数内でデータを直接操作できます。ただし、JSONP は GET リクエストのみをサポートし、POST などの他のリクエストメソッドはサポートしません。
CORS (Cross-Origin Resource Sharing): CORS は W3C 標準であるクロスドメインソリューションであり、フィールドを使用して在服务器端设置响应头中的Access-Control-Allow-Originブラウザーにクロスドメインアクセスを許可するかどうかを指示します。CORS はさまざまなタイプの HTTP リクエストメソッドをサポートしており、JSONP よりも柔軟性があります。
プロキシサーバー: フロントエンドページとバックエンドインターフェイスの間にプロキシサーバーをセットアップします。前端页面向代理服务器发送请求，代理服务器再将请求转发到后端接口プロキシサーバーは応答に Access-Control-Allow-Origin ヘッダーを追加することで、ブラウザーの同一オリジンポリシーをバイパスします。
WebSocket: WebSocket は、クライアントとサーバーの間に永続的な接続を確立できる全二重通信プロトコルで、双方がいつでもデータを送受信できます。WebSocket プロトコルは同一生成元ポリシーによって制限されないため、ドメイン間で通信できます。
postMessage: HTML5 で提供される postMessage API を使用すると、異なるウィンドウ間でデータを転送できます。これらのウィンドウが異なるソースからのものであっても、クロスドメイン通信を実現することもできます。

つまり、クロスドメインのシナリオが異なれば、異なるソリューションが必要になる可能性があり、特定の状況に応じて適切なクロスドメインソリューションを選択する必要があります。

3. クロスドメインに対する最適なソリューションは何ですか

前后端解决跨域的最佳方案是使用 CORS(Cross-Origin Resource Sharing) クロスドメインリソース共有プロトコル。CORS はクロスドメインソリューションであり、サーバー側の応答ヘッダーに Access-Control-Allow-Origin フィールドを設定することで、クロスドメインアクセスを許可するかどうかをブラウザーに指示します。JSONP やプロキシサーバーなどの他のクロスドメインソリューションと比較して、CORS には次の利点があります。

さらなるセキュリティ。JSONP やプロキシサーバーなどの他のクロスドメインソリューションを使用するとセキュリティリスクが生じる可能性がありますが、CORS を使用すると、応答ヘッダーに Access-Control-Allow-Origin フィールドを設定することでインターフェイスにアクセスできるドメイン名を制御できるため、セキュリティが向上します
。
シンプルで使いやすい。他のクロスドメインソリューションと比較して、CORS を使用すると、サーバー側で応答ヘッダーを設定するだけでクロスドメインの問題を簡単に解決でき、フロントエンドコードを変更する必要がありません。
すべての種類の HTTP リクエストがサポートされています。
GET リクエストのみをサポートする JSONP とは異なり、CORS はGET、POST、PUT、DELETE、PATCH などのあらゆる種類の HTTP リクエストをサポートします。

CORS を使用してクロスドメインを実行するための具体的な手順は次のとおりです。

1. サーバー側の応答ヘッダーの Access-Control-Allow-Origin フィールドを設定して、指定されたドメイン名のクロスドメインアクセスを許可します。たとえば、http://localhost:8080 ドメイン名でクロスドメインアクセスを許可するように設定します。

response.setHeader("Access-Control-Allow-Origin", "http://localhost:8080");

2. サーバー側の応答ヘッダーの Access-Control-Allow-Methods フィールドを設定して、指定された HTTP 要求メソッドのクロスドメインアクセスを許可します。たとえば、GET、POST、PUT、DELETE、PATCH などのリクエストメソッドを設定してクロスドメインアクセスを許可するには、次のようにします。

response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, PATCH");

3. サーバー側の応答ヘッダーの Access-Control-Allow-Headers フィールドを設定して、指定された要求ヘッダーに対するクロスドメインアクセスを許可します。たとえば、Content-Type や Authorization などのリクエストヘッダーを設定してクロスドメインアクセスを許可するには、次のようにします。

response.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");

要約すると、CORS の使用は、クロスドメインの問題に対するフロントエンドおよびバックエンドの解決策として最適なソリューションです。CORS には、高いセキュリティ、使いやすさ、あらゆる種類の HTTP リクエストのサポートという利点があり、次のような要求を満たすことができます。ほとんどのクロスドメインシナリオのニーズに対応します。

4. Spring で CORS を導入する方法

方法 1
CorsConfigurationSource Bean を追加する: Spring Boot プロジェクトでは、次のように CorsConfigurationSource Bean を追加することで CORS を構成できます。

@Configuration
public class CorsConfig {
    
    
    @Bean
    public CorsConfigurationSource corsConfigurationSource() {
    
    
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", corsConfiguration);
        return source;
    }
}

上記のコードでは、CorsConfiguration オブジェクトを作成し、すべてのドメイン名 (*)、すべてのリクエストヘッダー、およびすべてのリクエストメソッドを許可するように設定しました。次に、CorsConfiguration オブジェクトを UrlBasedCorsConfigurationSource に登録し、すべての要求をインターセプトするパス (/**) を設定し、最後に UrlBasedCorsConfigurationSource オブジェクトを返します。

方法 2
: CORS 構成を有効にする: Spring Boot プロジェクトでは、@CrossOrigin アノテーションを追加するか、WebMvcConfigurer Bean を構成することで CORS 構成を有効にできます。例:
@CrossOrigin アノテーションを追加します。

@RestController
@RequestMapping("/api")
@CrossOrigin(origins = "*", allowedHeaders = "*", methods = {
    
    RequestMethod.GET, RequestMethod.POST})
public class ApiController {
    
    
    // controller code here
}

上記のコードでは、ApiController クラスに @CrossOrigin アノテーションを追加し、すべてのドメイン名 (*)、すべてのリクエストヘッダー、および GET および POST リクエストメソッドを許可するように設定しました。

方法 3
WebMvcConfigurer Bean を構成する

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    
    
    @Override
    public void addCorsMappings(CorsRegistry registry) {
    
    
        registry.addMapping("/api/**")
                .allowedOrigins("*")
                .allowedHeaders("*")
                .allowedMethods("GET", "POST");
    }
}

上記のコードでは、WebMvcConfigurer Bean を作成し、addCorsMappings メソッドを書き換え、/api/** パスをインターセプトするようにリクエストを設定し、すべてのドメイン名 (*)、すべてのリクエストヘッダー、および GET および POST リクエストメソッドを許可しました。

上記の手順により、CORS を使用して Spring Boot プロジェクトのクロスドメインの問題を解決し、フロントエンドとバックエンドのデータ対話を実現できます。