Springboot はクロスドメインの問題をどのように解決しますか?-＆＃＆チュートリアル-php.cn

この記事の内容は、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";
    }
}

ログイン後にコピー

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

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 サイトの他の関連記事を参照してください。