ケース説明：

最近、プロジェクトの独立したフロントとリアエンドの展開でクロスドメインの問題がありました*

JWTプロジェクトが使用する認証のためには、それが開始するフロントエンド要求運ぶために必要である TOKENは*要求もたらしたリクエストトークンは、バックエンドの成功に送信することはできませんが、

クロスドメインの互換性の問題を使用した後：クローム、通常のFirefoxブラウザを、IEやクロスドメインエラーレポート中

まず、プロジェクト内のクロスドメインの問題は、使用することができますCORSを解決します

道

@CrossOrigin

それぞれにおけるコントローラクラスプラス

第二の方法は、直接、スプリングMVCの構成に追加します

<！ - クロスドメインインターフェイスの設定 - >

<MVC：CORS>

<MVC：マッピング・パス= "/ **"

許可-起源= "*"

許可-方法= "POST、GET、OPTIONS、DELETE、PUT"

許可-ヘッダ= "Content-Typeの、アクセス制御 - 許可 - ヘッダ、認可、X-要求-と"

許可-資格情報= "真" />

</ MVC：CORS>

3つの方法がインターセプタ可能に増加ヘッダー応答

response.setHeader（「アクセス制御 - 許可 - 起源」、「*」）;

response.setHeader（ "とAccess-Control-Allow-Credentials"、 "真"）。

response.setHeader（ "アクセス制御 - 許可 - メソッド"、 "GET、HEAD、POST、PUT、PATCH、DELETE、OPTIONS"）;

response.setHeader（「アクセス・コントロール・マックス・エイジ」、「86400」）。

response.setHeader（ "アクセス制御 - 許可 - ヘッダ"、「認可、上書き、デスティネーション、Content-Typeの、深さ、のUser-Agent、翻訳、レンジ、コンテンツレンジ、タイムアウト、X-file-sizeには、X-要求-with、変更された場合-のでXファイル名、のCache-Control、場所、ロック・トークン、もし "）;

平均実効クロスドメインリクエストのための3つ以上の簡単な方法は、ほとんどのニーズを満たすために。しかし、非クロスドメインは、単純なケースを要求したときに、問題があるだろう、我々はいくつかの調整を行う必要があります。

第二に、複雑な要求のために必要なオプションのリクエストを処理するプリフライト

前と分離プロジェクトの終了後、ブラウザの要求は、多くの場合、非シンプルなクロスドメインリクエストは、この要求が送信されますでしょうリクエストプリフライトリクエストのオプションを開始する最初のブラウザで、二回、及びその後の内容に基づいて、サーバに返さブラウザは、第2の方法は、GET、POSTは、サーバに要求を許可するかどうかを決定するなど入れて、データが第2正規のデータに戻る前に、最初に返されません。

我々が発生しますので：私たちはトークンインターセプタを扱っている（非単純なケース、オプションを受け、許可ヘッダーは、認証用トークンを運ぶ）とき意志プリフライト通常の要求としての要求が、オプションを要求することができないときトークンを運ぶヘッダに、最初の要求の後端部がバック戦うように、第2の要求につながるが正しく起動することができません。

（以下のいずれかを含む）以外の単純な例：

要求モード： PUT、DELETE
カスタムヘッダフィールド
送信 JSON形式のデータを
フォーマルなコミュニケーションの前に、ブラウザが最初に送信されます事前スクリーニング、リクエストは「プリフライトリクエスト」と呼ばれているこの時間は、OPTION要求を
成功したサーバーの応答プリフライトリクエストした後、それは本当の要求を送信し、実際のデータを運びます

後端に直接要求によってオプションの溶液（200、204は、単にブラウザすなわちサーバは許可要求を決定するに戻ります）

追加 CorsInterceptorを

パブリッククラスCorsInterceptor実装HandlerInterceptor { 

//使用了方式三、进行CORS配置

        response.setHeader（ "アクセス制御-許可-起源"、 "*"）; 

        response.setHeader（ "とAccess-Control-Allow-Credentials"、 "真"）。

        response.setHeader（ "アクセス制御-許可-メソッド"、 "GET、HEAD、POST、PUT、PATCH、DELETE、OPTIONS"）; 

        response.setHeader（「アクセス・コントロール・マックス・エイジ」、「86400」）。

        response.setHeader（ "アクセス制御-許可-ヘッダ"、「認可、上書き、デスティネーション、Content-Typeの、深さ、のUser-Agent、翻訳、レンジ、コンテンツレンジ、タイムアウト、X-file-sizeには、X-要求-with、変更された場合-のでXファイル名、のCache-Control、場所、ロック・トークン、もし"）;


            response.setStatus（HttpStatus.NO_CONTENT.value（））。

            System.out.println（ "是オプション请求、跳过"）; 

            falseを返します。

        } 

        trueを返します。

    } 

}

内バネMVC これにロードされた処理トークンに配置され、前CorsInterceptor

        <MVC：インターセプター> 

            <MVC：マッピングパス= "/ **" /> 

            <beanクラス= "cn.gdyvc.interceptor.CorsInterceptor" /> 

        </ MVC：インターセプター>

三、 CORSブラウザの互換性の問題

最後に、展開が完了しているが、クロム、Firefoxブラウザ通常、しかし、IEはまだクロスドメインエラーを報告し、Internet Explorerは、問題のCORSアクセス制御-許可-メソッドに出会います

インターネットのクロスドメインの構成設定の始まり「*」へのアクセス制御-許可-ヘッダの対応、およびIeは*対応することができない、それはする必要があり、別途記載されているヘッダの列

参考リンク：

https://www.jianshu.com/p/5c637bfcc674

https://stackoverflow.com/questions/51857247/ie-cors-access-control-allow-headers-error-even-though-headers-are-specified

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers

別々の前端と後端のjava、JWTプロジェクトCORSクロスドメイン、非クロスドメインの問題を解決するための単純な要求、互換性の問題

まず、プロジェクト内のクロスドメインの問題は、使用することができますCORSを解決します

第二に、複雑な要求のために必要なオプションのリクエストを処理するプリフライト

三、 CORSブラウザの互換性の問題

おすすめ