Springboot はクロスドメインの問題をどのように解決しますか?

この記事の内容は、springboot がクロスドメインの問題をどのように解決するかについてです。一定の参考値があるので、困っている友人は参考にしていただければ幸いです。

1. クロスドメイン HTTP リクエストとは何ですか?

セキュリティ上の理由から、最新のブラウザは XMLHttpRequest オブジェクトを使用して HTTP を開始するときに同一生成元ポリシーに準拠する必要があります。それ以外の場合、クロスドメイン HTTP リクエストはデフォルトで禁止されています。クロスドメイン HTTP リクエストは、ドメイン A のリソースがドメイン B のリソースをリクエストすることを指します。たとえば、マシン A の Nginx にデプロイされた js コードは、マシン B の Tomcat にデプロイされた RESTful インターフェイスを ajax 経由でリクエストします。 (推奨: Java ビデオ チュートリアル )

IP (ドメイン名) またはポートが異なると、クロスドメインの問題が発生します。クロスドメインの問題を解決するために、HTML5 で CORS プロトコルが導入されるまでは、jsonp やプロキシ ファイルなどのソリューションが存在していましたが、アプリケーション シナリオは限られており、メンテナンス コストが高額でした。

CORS は W3C 標準であり、正式名は「クロスオリジン リソース共有」(クロスオリジン リソース共有) です。これにより、ブラウザがクロスオリジン サーバーに XMLHttpRequest リクエストを発行できるようになり、AJAX の問題が解決されます。同じオリジンからのみ使用できます。特別なヘッダー [Access-Control-Allow-Origin] をサーバーに追加して、クライアントにクロスドメイン制限について通知します。ブラウザーが CORS をサポートし、Origin が渡されたと判断した場合、XMLHttpRequest はクロスドメイン リクエストの開始を許可されます。 。

CROS 共通ヘッダー

Access-Control-Allow-Origin: http://somehost.com は、http://somehost.com がクロスドメイン リクエストの開始を許可されていることを示します。
Access-Control-Max-Age:86400 は、86400 秒以内に事前検証リクエストを送信する必要がないことを意味します。
Access-Control-Allow-Methods: GET、POST、PUT、DELETE は、クロスドメイン要求を許可するメソッドを示します。
Access-Control-Allow-Headers: content-type は、クロスドメイン リクエストに content-type

2 を含めることが許可されていることを示します。CORS はクロスドメイン アクセスを実装します

認可メソッド
メソッド 1: 新しい CorsFilter を返す
メソッド 2: WebMvcConfigurer をオーバーライドする
メソッド 3: アノテーション (@CrossOrigin) を使用する
メソッド 4: 応答ヘッダー (HttpServletResponse) を手動で設定する

注: メソッド 1 と 2 はグローバル CORS 構成に属し、メソッド 3 と 4 はローカル CORS 構成に属します。ローカル クロスドメインを使用すると、グローバル クロスドメイン ルールがオーバーライドされるため、@CrossOrigin アノテーションを使用して、より詳細なクロスドメイン リソース制御を行うことができます。

1. 新しい CorsFilter (グローバル クロスドメイン) を返します

package com.hehe.yyweb.config;

@Configuration
public class GlobalCorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        //1.添加CORS配置信息
        CorsConfiguration config = new CorsConfiguration();
          //放行哪些原始域
          config.addAllowedOrigin("*");
          //是否发送Cookie信息
          config.setAllowCredentials(true);
          //放行哪些原始域(请求方式)
          config.addAllowedMethod("*");
          //放行哪些原始域(头部信息)
          config.addAllowedHeader("*");
          //暴露哪些头部信息（因为跨域访问默认不能获取全部头部信息）
          config.addExposedHeader("*");

        //2.添加映射路径
        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config);

        //3.返回新的CorsFilter.
        return new CorsFilter(configSource);
    }
}

2. WebMvcConfigurer をオーバーライドします (グローバル クロスドメイン)

任意の構成クラス, 新しい WebMvcConfigurer Bean を返し、それが提供するクロスドメイン要求処理インターフェイスを書き換えて、マッピング パスと特定の CORS 構成情報を追加します。

package com.hehe.yyweb.config;

@Configuration
public class GlobalCorsConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            //重写父类提供的跨域请求处理的接口
            public void addCorsMappings(CorsRegistry registry) {
                //添加映射路径
                registry.addMapping("/**")
                        //放行哪些原始域
                        .allowedOrigins("*")
                        //是否发送Cookie信息
                        .allowCredentials(true)
                        //放行哪些原始域(请求方式)
                        .allowedMethods("GET","POST", "PUT", "DELETE")
                        //放行哪些原始域(头部信息)
                        .allowedHeaders("*")
                        //暴露哪些头部信息（因为跨域访问默认不能获取全部头部信息）
                        .exposedHeaders("Header1", "Header2");
            }
        };
    }
}

3. アノテーションを使用する (ローカル クロスドメイン)

メソッド (@RequestMapping) でアノテーション @CrossOrigin を使用します:

@RequestMapping("/hello")
@ResponseBody
@CrossOrigin("http://localhost:8080") 
public String index( ){
    return "Hello World";
}

またはコントローラー (@Controller) ) アノテーション @CrossOrigin を使用します:

@Controller
@CrossOrigin(origins = "http://xx-domain.com", maxAge = 3600)
public class AccountController {

    @RequestMapping("/hello")
    @ResponseBody
    public String index( ){
        return "Hello World";
    }
}

1. 応答ヘッダーを手動で設定します (部分的なクロスドメイン)

HttpServletResponse オブジェクトを使用して応答ヘッダー (Access-Control) を追加します-Allow-Origin) を使用して認証を行います。元のドメイン。ここでの Origin の値は、すべてが許可されることを意味する「*」に設定することもできます。

@RequestMapping("/hello")
@ResponseBody
public String index(HttpServletResponse response){
    response.addHeader("Access-Control-Allow-Origin", "http://localhost:8080");
    return "Hello World";
}

3. クロスドメイン アクセスをテストする

まず Spring Initializr を使用して、何も変更せずに Maven プロジェクトをすばやくビルドします。静的ディレクトリに、クロスドメイン アクセスをシミュレートするページ、index.html を追加します。ドメインアクセス。ターゲット アドレス: http://localhost:8090/hello

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Page Index</title>
</head>
<body>
<h2>前台系统</h2>
<p id="info"></p>
</body>
<script src="webjars/jquery/3.2.1/jquery.js"></script>
<script>
    $.ajax({
        url: 'http://localhost:8090/hello',
        type: "POST",
        xhrFields: {
           withCredentials: true //允许跨域认证
        },
        success: function (data) {
            $("#info").html("跨域访问成功:"+data);
        },
        error: function (data) {
            $("#info").html("跨域失败!!");
        }
    })
</script>
</html>

次に、別のプロジェクトを作成し、ルート パッケージに Config ディレクトリを追加して、グローバル CORS を有効にするための構成クラスを作成します。

package com.hehe.yyweb.config;

@Configuration
public class GlobalCorsConfig {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**");
            }
        };
    }
}

次に、Rest インターフェイスを作成し、アプリケーション ポートを 8090 に指定します。

package com.hehe.yyweb;

@SpringBootApplication
@RestController
public class YyWebApplication {

    @Bean
    public TomcatServletWebServerFactory tomcat() {
        TomcatServletWebServerFactory tomcatFactory = new TomcatServletWebServerFactory();
        tomcatFactory.setPort(8090); //默认启动8090端口
        return tomcatFactory;
    }

    @RequestMapping("/hello")
    public String index() {
        return "Hello World";
    }

    public static void main(String[] args) {
        SpringApplication.run(YyWebApplication.class, args);
    }
}

最後に、2つのアプリケーションをそれぞれ起動し、ブラウザで http://localhost:8080/index.html にアクセスすると、JSONデータが正常に受信でき、クロスドメインアクセスが成功したことがわかります。 ！ ！

以上がSpringboot はクロスドメインの問題をどのように解決しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。