さまざまなクロスドメインチュートリアル、さまざまなプラクティス、さまざまなQ＆Aオンライン。単純なJSONPに加えて、多くの人がCORが機能していないと言い、常に1つまたは2つの重要な構成が欠けています。この記事は問題を解決したいだけであり、すべてのコードは自分で実践されています。
この記事では、クロスドメインのGET、投稿、データ、Cookieなどの問題を解決します。
この記事では、GETリクエストと投稿リクエストについてのみ説明します。読者は、Get Requestsを除く他のすべての要求方法として、投稿リクエストを理解する必要があります。
jsonp
JSONPは、ブラウザにスクリプトリソース参照に相同性がないという原則を使用し、スクリプトタグを動的に挿入し、リソースがページにロードされた直後に実行されます。 JSONPは非公式の伝送プロトコルです。このプロトコルの重要なポイントの1つは、ユーザーが最初にコールバックに渡すか、コールバックメソッドを定義できるようにすることです。パラメーターはサーバーに与えられます。サーバーがデータを返すと、コールバックパラメーターが関数名として使用されてJSONデータをラップするため、クライアントは独自の関数をカスタマイズして戻りデータを自動的に処理できます。
JSONPはGETリクエストのみをサポートしますが、投稿などの他のタイプのHTTPリクエストはサポートしていません。クロスドメインHTTPリクエストのみをサポートします。異なるドメイン内の2ページ間でJavaScriptコールを作成する方法の問題を解決することはできません。 JSONPの利点は、昔ながらのブラウザをサポートしていることであり、不利な点も明らかです。開発のためにクライアントとサーバーのカスタマイズが必要です。サーバーによって返されるデータは、標準のJSONデータではなく、コールバックによってラップされたデータにすることはできません。
JSONPの原則は非常に単純であり、[フロントエンドが静的リソースを要求する場合、クロスドメインの問題はありません]のアイデアを使用します。
しかし、それはGETのみをサポートし、GETのみをサポートし、GETのみをサポートします。
この方法はJSONPと呼ばれるため、バックエンドデータはJSONデータを使用する必要があることに注意してください。さりげなく文字列や何かを作ることはできません。そうしないと、結果が不可解であることがわかります。
フロントエンドjQueryライティング方法
$ .ajax（{type： "get"、url：baseurl + "/jsonp/get"、datatype： "jsonp"、success：function（response）{$（ "＃response"）。データタイプ：「JSONP」。これを除き、他の構成は通常の要求と同じです。
バックエンドSpringMVC構成
SpringMVCも使用する場合は、JSONPアドバイスを構成して、作成するすべてのコントローラーメソッドでは、クライアントがJSONPを要求しているかどうかを検討する必要がなくなり、Springはそれに応じて自動的に処理します。
@controlleradvicePublic class jsonpadviceはabstractjsonpresponsebodyadvice {public jsonpadvice（）{//このようにして、リクエストにコールバックパラメーターが含まれている場合、SpringはJSONPリクエストスーパー（ "Callback"）; }}上記の執筆方法では、SpringMVCバージョンが3.2より低くないことが必要であり、アップグレードする必要があるとしか言えません。
バックエンドNon-SpringMVC構成
私が最初に仕事を始めたとき、Struts2はまだ人気がありました。数年後、SpringMVCは基本的に国内市場を支配しました。
怠zy、ここに擬似コードがあり、メソッドがフロントエンドに戻る前にラップメソッドをクリックします。
@controlleradvicePublic class jsonpadviceはabstractjsonpresponsebodyadvice {public jsonpadvice（）{//このようにして、リクエストにコールバックパラメーターが含まれている場合、SpringはJSONPリクエストスーパー（ "Callback"）; }}cors
クロスオリジンリソース共有
CORSは、最新のブラウザがクロスドメインリソースのリクエストをサポートする方法です。フルネームは「クロスオリジンルセルセアリング」です。 XMLHTTPREQUESTを使用して要求を送信する場合、ブラウザは、リクエストが同じオリジンポリシーに準拠しておらず、リクエストヘッダーをリクエストに追加します：Origin。背景は一連の処理を実行します。リクエストを受け入れると判断された場合、応答ヘッダーが返された結果に追加されます：Access-Control-Allow-Origin;ブラウザは、対応するヘッダーに原点の値が含まれているかどうかを決定します。ある場合、ブラウザは応答を処理し、応答データを取得できます。ブラウザにブラウザが含まれていない場合、応答データを取得できません。
CORSとJSONPは同じ目的を使用していますが、JSONPよりも強力です。 CORSはすべてのブラウザリクエストタイプをサポートし、要求されたデータの量は大きく、よりオープンで簡潔になります。サーバーは、処理されたデータを直接返すだけで、特別な処理は必要ありません。
結局のところ、JSONPはGETリクエストのみをサポートしていますが、これは間違いなくすべてのリクエストニーズを満たすことができないため、CORSを移動する必要があります。
国内のWeb開発者はまだ非常に困難です。ユーザーはブラウザをアップグレードしません。上司は、開発者が互換性があることを望んでいます。
CORSは次のブラウザをサポートしています。現在、ブラウザの問題はますます重要ではなくなっており、TaobaoでさえIE7 ~~~をサポートしていません
Chrome 3+
Firefox 3.5+
オペラ12+
Safari 4+
インターネットエクスプローラー8+
フロントエンドjQueryライティング方法
コードを見てください：
$ .ajax（{type： "post"、url：baseurl + "/jsonp/post"、datatype： 'json'、crossdomain：true、xhrfields：{withcredentials：true}、data：{name： "name_from_frondend"}、成功：機能$（ "＃response"）。Datatype：「JSON」、JSONはJSONPではなく、JSONPではなく、JSONPではなくJSONです。
CrossDomain：本当、ここではクロスドメイン要求を使用することを意味します
xhrfields：{withcredentials：true}。構成によりクッキーをもたらすことができます。そうしないと、セッションを維持することさえできず、多くの人がここに閉じ込められています。もちろん、この要件がない場合は、これを構成する必要はありません。
バックエンドSpringMVC構成
ほとんどのWebプロジェクトでは、通常、MVC関連の構成クラスがあり、WebMVCConFigurerAdapterから継承されます。 SpringMVC 4.2以上も使用する場合は、次のようにこの方法を追加するだけです。
@configurationpublic class webconfig extends webmvcconfigureradapter {@override public void addcorsmappings（corsregistry registry）{registry.addmapping（ "/**/*"）。 }}残念ながらプロジェクトにいる場合は、SpringMVCバージョンが4.2より低い場合は、「曲線を通じて国を保存する」必要があります。
パブリッククラスのCrossDomainFilterは、ワンパールクエストフィルター{@Override保護されたvoid dofilterinternal（httpservletrequestリクエスト、httpservletresponse応答、フィルターチェーンフィルターチェーン）を拡張します。 Response.Addheader（ "Access-Control-allow-credentials"、 "true"）; Response.Addheader（ "Access-Control-Allow-Methods"、 "get、post、put、delete"）; Response.Addheader（ "Access-Control-Allow-Headers"、 "Content-Type"）; filterchain.dofilter（リクエスト、応答）; }}web.xmlでフィルターを構成します：
<filter> <filter-name> crossdomainfilter </filter-name> <filter-class> com.javadoop.filters.crossdomainfilter </filter-class> </filter> <filter-mapping> <filter-name> crossdomainfilter </filter-name> <url-pattern>/*</url-pertherth
Shiroを使用する多くのプロジェクトがあり、Shiro Filtersを構成することもできますので、ここでは紹介しません。
私は非常に一般的な構成について話していることに注意してください。これは、ほとんどのプロジェクトでこのような一般的な構成で構成できます。読者は、記事の「*」などの構成を一致させる方法を知っている必要があります。
読者がブラウザが「*」シンボルを使用できないことをプロンプトすることを見つけた場合、読者は上記のフィルターのリクエストオブジェクトに従ってリクエストヘッダーの参照者（request.getheader（ "参照者"）を取得し、次に「アクセス制御 - アロウオリジン」を動的に設定できます。
string referer = request.getheader（ "referer"）; if（stringutils.isnotblank（referer））{url url = new url（referer）; String Origin = url.getProtocol（） + "：//" + url.gethost（）; Response.Addheader（ "Access-Control-Allow-Origin"、Origin）;} else {Response.Addheader（ "Access-Control-Allow-Origin"、 "*"）;}フロントエンドの非jQueryライティング
1つのトリックでjQueryを食べる日は完全になくなりました。ここでは、jqueryを使用しない場合、ポストクロスドメインの問題を解決する方法について説明します。
ネイティブJSを紹介しましょう：
関数CreateCorsRequest（method、url）{var xhr = new xmlhttprequest（）; if（ "withcredentials" in xhr）{//クレデンスを持つ属性がある場合、それは間違いなくxmlhttprequest2オブジェクトです。 3番目のパラメーターxhr.open（method、url、true）を見てください。 } else if（typeof xdomainRequest！= "undefined"）{//このオブジェクトは、domains xhr = new XdomainRequest（）を要求するためにIEで使用されます。 xhr.open（method、url）; } else {//もしそうなら、残念ながら、ブラウザはcors xhr = nullをサポートしていません。 } return xhr;} var xhr = createCorsRequest（ 'get'、url）; if（！xhr）{新しいエラー（ 'cors not supported'）;}その中には、Chrome、Firefox、Opera、およびSafariの中で、これらの「プログラマーに優しい」ブラウザはXmlhttprequest2オブジェクトを使用しています。 IEはXdomainRequestを使用します。
要約します
上記は、クロスドメインの要求の問題を迅速に解決することです：JSONPとCORS。私はそれが誰にでも役立つことを願っています。興味のある友人は、このサイトの他の関連トピックを引き続き参照できます。欠点がある場合は、それを指摘するためにメッセージを残してください！