どのようにSpringbootクロスドメインへのエレガントな解決策は、[ターン]のAJAX +カスタムヘッダを要求

1.クロスドメインとは何ですか

ブラウザの相同戦略ので（同一生成元ポリシー、それは今、すべてのJavaScript対応のブラウザでは、この戦略を使用します。Netscapeが提案されている既知のセキュリティポリシーである。いわゆる相同ドメイン、プロトコル、同じポートを指します。）、ドメイン名の間に要求URLを送信するための任意の合意、3つのポートとクロスドメインとは異なる現在のページのアドレスのいずれか。

詳細は、次の表を参照してください。

2、クロスドメインの問題を解決する方法springboot

1.通常のクロスドメインリクエスト・ソリューション：

注釈インターフェイスを追加する①要求@CrossOrigin（原点= "http://127.0.0.1:8020"、MAXAGE = 3600）

説明：フィールド現在の要求インターフェースの起源=「http://127.0.0.1:8020」起源値

②一般的な構成（すべてのインターフェイスは、クロスドメイン要求を許可します）

新しいクラス構成ガイドCorsFilter法の適用とCorsConfigurationのか、また、

@Configuration  
 パブリック クラスCorsConfig {  
     プライベートCorsConfiguration buildConfig（）{   
        CorsConfiguration corsConfigurationは = 新しい新しいCorsConfiguration（）;   
        corsConfiguration.addAllowedOrigin（ "*"）; // 1は、任意のドメインの使用可能 
        corsConfiguration.addAllowedHeader（ "*"）を; // 2が任意に可能ヘッド 
        corsConfiguration.addAllowedMethod（ "*"）; // 3（等、ポスト、得る）任意の方法を可能にする。
        返すcorsConfigurationを;   
    }   

    @Bean   
    公共CorsFilter corsFilter（）{   
        UrlBasedCorsConfigurationSourceソース =新しいUrlBasedCorsConfigurationSource（）;  
        source.registerCorsConfiguration（ "/ **"、buildConfig（））; // 4   
        リターン 新しいCorsFilter（ソース）。  
    }   
}

2.ajaxのカスタムヘッダーのクロスドメインリクエスト

$アヤックス（{ 
        タイプ： "GET" 、
        URL： "のhttp：// localhostを：8766 /メイン/通貨/ sginInState" 、
        データ型： "JSON" 、
        データ：{ 
            UID：userIdを
        }、
        beforeSend：機能（XMLHttpRequestを）{ 
            XMLHttpRequest.setRequestHeader（ "認可" 、access_tokenは）; 
        }、
        成功：関数（RES）{ 
            にconsole.log（res.code）
        } 
    }）

この時点で、要求はhttp：// localhostを：8766 / / sginInStateインタフェースが見つかっ/通貨主なオプションはhttp：// localhostを：8766 /メイン/通貨/ 500のエラーは、一般的なクロスドメインソリューションは、この問題を解決することができなかったsginInState、なぜOPTIONSがそれを要求見えますか？

理由

実際にOPTIONSのための事前スクリーニング方法を送信するためにリクエストを送信する前にブラウザがプリフライトは、要求は、この要求が安全であることを確認するために使用されますが、すべての要求が送信されない、次の条件に従う要求する要求します：

リクエストのメソッドはGET / HEAD / POSTではありません
Content-TypeのPOSTリクエストは、アプリケーション/ x-www-form-urlencodedで、マルチパート/フォームのデータではない、またはテキスト/平野
要求は、カスタムヘッダーフィールドを設定し、

インターフェイスの管理側では、私はインターフェイスを確認する権限を持って、各要求は、カスタムのヘッダーのフィールド（トークン）を運ぶために必要があり、ブラウザはリクエストの安全性を確認するために、マルチOPTIONS要求を送信します。

500 OPTIONSがそれを要求するのはなぜですか？

OPTIONS要求は、対応する値にはなりません、だけでカスタムフィールドを搬送し、バックグラウンドチェックトークントークンフィールドがNULLであるため、認証に失敗した場合、例外がスローされます。

だから我々はこの問題を解決するために、次のとおりです。

①春のブートプロジェクトがapplication.yml追加します

春：
MVC：
ディスパッチ・オプション要求：真

注：このソリューションは、いくつかのケースではおそらく環境問題に、問題のOPTIONSを解決しないことがあり、複雑なカスタムフィルタのフィルタ構成の問題かもしれません。

②フィルタの設定を追加

ステップ：そのようなクラスのHandlerInterceptorクラスを達成するために必要な手書きRequestFilter要求フィルター設定、クラスがあるorg.springframework.web.servlet.HandlerInterceptor HandlerInterceptor。

特定のコードの実装：

@Component
 パブリック クラス RequestFilterは実装{HandlerInterceptorを
    パブリック ブールpreHandler（HttpServletRequestのリクエスト、HttpServletResponseの応答、オブジェクト・ハンドラ）{ 
       response.setHeader（「アクセス制御-許可原点」、「*」）。
       response.setHeader（ "とAccess-Control-Allow-Credentials"、 "真" ）。
       response.setHeader（ "アクセス制御-メソッド許可する" "GET HEAD、POSTは、PUT、PATCH、DELETE、OPTIONS" ）; 
       response.setHeader（「アクセス・コントロール・マックス・エイジ」、「86400」）。
       response.setHeader（ "）;
        // オプションの端部が要求した場合
       IF （HttpMethod.OPTIONS.toString（）に等しい（request.getMethod（）））{。
           Response.setStatus（HttpStatus.NO_CONTENT.value（））; 
           戻り falseに; 
       } 
       戻り trueにします。
   } 
}

ステップ2：これらはWebMvcConfigurationSupportを継承する必要が手書きMyWebConfiguration。

注意：WebMvcConfigurationSupportは2.xのバージョン、1.1バージョンWebMvcConfigurerAdapter以上のものです。

特定のコードの実装：

@Component
 パブリック クラス MyWebConfigurationは延びWebMvcConfigurationSupport { 
    @Resource 
    プライベートRequestFilter requestFilterと、
    @Override 
    公共 のボイドaddInterceptors（InterceptorRegistryレジストリ）{
         // 跨域拦截器 
        registry.addInterceptor（requestFilter）.addPathPatterns（ "/ **" ）; 
    } 
}

我々は要求のクロスドメインAJAX +自己定義ヘッダーへの最適なソリューションを持っているこの時点で、学習の自由な交換を感じてください。