スプリングガイドにCORSを適用

14011 ワード
cors web テキストリンク
CORSについてもっと知りたい方は、まず理論編を参考にしてください
[理論編]SOPとCORS

サーバにCORSを適用する


実験環境の設定

  • クライアントプロジェクト(この例ではtest、ポートはlocalhost:8000)、サーバプロジェクト(この例ではdemo、ポートはlocalhost:8001)の2つのプロジェクトを作成
  • 顧客プロジェクト環境設定
  • build.gradle依存項目にtymeleafに関連する依存項目
    • を追加
    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
  • application.サーバポートをproperties
    • に割り当てる
    server.port=8000
  • DemoControllerを作成し、コード
    • を追加
    package com.example.demo;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/test")
public class DemoController {

    @GetMapping
    public String test() {
        return "테스트입니다.";
    }

}
  • サーバプロジェクト(プレゼンテーション)環境設定
  • application.サーバポートをproperties
    • に割り当てる
    server.port=8001
  • リソース/テンプレートのcors.htmlファイル
    • を追加
       <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>Title</title>
   </head>
   <body>
   <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
   <script>
     
     $(function(){
       $.ajax("http://localhost:8000/test")
       .done(function(msg){
         alert(msg);
       })
       .fail(function(){
         alert("fail");
       })
     })
   </script>
   </body>
   </html>

  • サーバの実行と実装の検証
    両方のサーバが稼働した後にhttp://localhost:8001/api/viewに接続されている場合、CORS権限は付与されていません.
    開発者モードを実行すると、コンソールで次のエラーとfailalertが発生します.

    • CORSの適用


    1.@CrossOriginを追加


    ➡️ スプリングDOCSで@CrossOrigin宣言
  • spring 4.2版は
    • をサポート
  • コントローラまたはメソッドユニット
    @CrossOrigin(origins = "*", allowedHeaders = "*")
    説明orientsが許可するドメインを設定します.複数ある場合、orient={"http://localhost:8000""http://localhost:8001"}はallowedHeadersが許可するタイトルmaxAgepreflightの結果をキャッシュに保存する時間を表します.デフォルト値は1800秒(30分)です.
    適用例
    @CrossOrigin(origins = "http://localhost:8001") // 🌟 추가
@RestController
@RequestMapping("/test")
public class DemoController {

    @GetMapping
    public String test() {
        return "테스트입니다.";
    }

}
    コントローラに@CrossOriginを追加すると、正常に動作します.

    2.WebConfigでCORSを設定する

  • WebMvcConfiguratorを継承するWebConfigファイルを作成し、@Configurationで優先パラメータファイル
    • に設定します.
    addMappingプログラムが提供するCORSを許可するドメインを設定します.このコードは、allowedOrigins要求を許可するすべてのURLを許可するドメインを設定します.このコードは、フロントエンドドメインURL LalowedHeadersが要求するヘッダファイルAllowedMethodsが許可するHTTPメソッドAllowCredentials Cookie要求を許可するmaxAgepreflight要求に対する応答時間をブラウザにキャッシュする.
    適用例
    WebMvcConfigを継承するWebConfigプロファイルを作成し、サーバ上のすべてのAPI(.addMapping("/**"))をlocalhost:8001ドメイン接続を許可するように設定します.( .allowedOrigins("http://localhost:8001") )
    @Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:8001");
    }
}

    フロントエンドにCORSを適用


    Proxyの作成

  • フロント(localhost:8001)送信要求
  • サーバに移動する前に、プロキシサーバを介して
    プロキシサーバにAccess-Control-Allow-Origin : *応答
    • を設定.
  • サーバ(localhost:8000)は応答を送信し、応答ヘッダはAccess-Control-Allow-Origin : *であり、CORSポリシー
    • に違反しない.
    reactionの場合
    WebpackはProxy機能をサポートしています.
    package.jsonで
    {
  "proxy": "http://xxx"
}
    追加するだけで簡単に問題を解決できます.
    実行中のプロキシサーバの使用
    cors-anywhereエージェントサーバ.
    https://cors-anywhere.herokuapp.com/https://soyeon207.com
    rocors-anywhere URLの後ろに要求されたURLを追加すればいいのですが、Herokoのエージェントサーバが応答ヘッダを中間に設定しているにもかかわらず、速度が遅く、現在正常に動作していないというホットな問題があります.

    リファレンス


    Spring BootでのCORS
    Spring-Boot-COSの設定
    CORSはどうして私たちをこんなに疲れさせたのですか?
    Proxyを使用してCORSに応答する問題を解決
    [Rails]Formオブジェクト使用時にエラーメッセージが日本語化されない[locale]
    [Kotlin,Java]:OOP,Kotlin,Java,Object,Instance,Inheritance,多形性,抽象,パッケージング,バインド,Overriding,Overloading,Interface