次に、ブラウザクロスドメイン要求データの関連する問題について説明しましょう。これは、クロスドメイン要求データを拒否することがブラウザに固有のものではないためだと言うのはそれほど標準ではないかもしれません。 Cross Domainがデータを要求できない理由は、ブラウザが基本的に「同種ポリシー」と呼ばれるセキュリティ仕様を実装しているためです。特定の仕様は何ですか？次のアドレスでMDNのプロファイルを見つけました。
ブラウザの相同ポリシーの説明
一般に、URL AとURL Bがプロトコル、ポート、およびドメイン名の観点から異なる場合、ブラウザは同じオリジンポリシーを開始し、サーバーAとB間のデータ要求を拒否します。
同じオリジナル戦略について話すとき、あなたが得る知識は浅いです。自分で練習する必要があります。同じオリジナル戦略はどのように反映されますか？以下に、コードと組み合わせてステップバイステップを示します。
1.サーバーAはサーバーを要求できませんb
クロスドメインなので、私は2つのドメイン名、つまりAとlocalHostを持っていると仮定します。 Aは、エディターがAlibaba Cloudのドメイン名をホストすることを意味します。 LocalHostは、名前が示すように、私の開発マシンです。 LocalHostにindex.htmlファイルを展開するシナリオ、サーバーAの単純なスプリングブートバックエンドサービスを展開し、それをindex.htmlファイルコールに公開する簡単なインターフェイスを提供するシナリオを想像します。最後に、ブラウザはLocalHostのindex.htmlファイルを要求し、ブラウザがプロンプトするものを確認しますか？
index.html
<！Doctype html> <html> <head> <title>テストクロスドメインアクセス</title> <meta charset = "utf-8"/> </head> <body> <body> <script src = "https://cdn.bootcss.com/jquery/3.3.1/jquery.min.min.min.js"> </jivasp> $（document）.ready（function（）{$ .ajax（{type： "get"、async：true、url： "http：//a/hello/map/getuser.json"、// request interface type on server a： "json"、success：function（data）{// returned dataol.logの印刷 </script> <h2> hello world </h2> </body> </html>ブラウザでindex.htmlファイルをリクエストすると、次のように表示されます。
リクエストはブラウザによって拒否され、クロスドメインのリクエストを許可しないように促していることがわかります。それは非常に不快です。それを解決する方法は？
2。JSONPを使用して、ドメインクロスリクエストを解決します
まず、原則について話しましょう。 JSONPは、クロスドメインの問題を解決します。主に<script>タグのクロスドメイン可能性、つまりSRC属性のリンクアドレスにアクセスできる機能を使用します。
index.html
<！Doctype html> <html> <head> <title>テストクロスドメインアクセス</title> <meta charset = "utf-8"/> </head> <body> <body> <script src = "https://cdn.bootcss.com/jquery/3.3.1/jquery.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.js $（document）.ready（function（）{$ .ajax（{type： "get"、 "get"、async：true、jsonp： "callbackname"、// backend interfaceパラメーター名Jsonpcallback： "callbackfunction"、// callback function name name： "http：//a/a/a/hello/map/getuser.json" JSONP成功：function（data）{console.log（ "success"）}）; </script> <script type = "text/javascript"> var callbackfunction = function（data）{alert（ 'インターフェイスによって返されるデータは：' + json.stringify（data））; }; </script> </body> </html>Aサーバーのインターフェイスコードは次のとおりです。
/** * *クラスJSonbackController。 * *説明：コントローラーは一連の単純なJSONデータを返し、JSONデータはシンプルなユーザーオブジェクトで構成されています * * @Author：huangjiawei * @since：2018年6月12日 * @version：$ revision $ $ $ $ $ $ $ $ $ * */ @restcontroller @requestmapping（value = "/map"）public class jsonbackcontroler loggerfactory.getLogger（jsonbackcontroller.class）; / ***クロスドメイン要求データを解決* @param Response* @param Callbacknameフロントエンドコールバックname* @return*/ @RequestMapping（value = "getUser.json"）public void getUser（httpservletresponse応答、@requestparam string callbackname） Response.setContentType（ "Text/JavaScript"）;ライターライター= null; try {writer = response.getWriter（）; writer.write（callbackname + "（"）; writer.write（user.tostring（））; writer.write（ "）;"）; } catch（ioException e）{logger.error（ "jsonp response write failed！data：" + user.toString（）、e）; }最後に{if（writer！= null）{try {writer.close（）; } catch（ioException e）{logger.error（ "出力ストリームクローズ例外！"、e）; } writer = null; }}}}バックエンドは、パラメーターコールバック名のコールバック関数名を渡し、JSコードの一部をフロントエンドに返します。 JSコード形式は次のとおりです。
callbackName + ( data ) + ;
ブラウザは、localhostサーバーのindex.htmlファイルを要求し、結果は次のとおりです。
上記の方法は、jQuery + jsonpを介してドメインクロスの問題を解決します。 <script>タグのSRC属性を使用できると言っていませんでしたか？ 4。
LocalHostサーバー上のindex.html
<！Doctype html> <html> <head> <title>テストクロスドメインアクセス</title> <meta charset = "utf-8"/> </head> <body> <body> <script src = "https://cdn.bootcss.com/jquery/3.3.1/jquery.min.min.min.js"> </jivaspric callbackfunction = function（data）{alert（ 'インターフェイスによって返されるデータは次のとおりです。' + json.stringify（data））; }; </script> <script type = "text/javascript" src = "http：//a/hello/map/getuser.json？callbackname = callbackfunction"> </script> </body> </html>ブラウザの表示効果は上記と同じです。ただし、SRCはJSファイルを導入することを意味することに注意する必要があります。インターフェイスによって直接呼び出され、インターフェイスによって返されるデータはたまたまJSコードの一部であるため、実行できます。さらに、2番目の<script>タグの順序を逆にすることはできません。そうしないと、callbackfunction関数は見つかりません。
プロジェクトコードアドレス：https：//github.com/smallercoder/jsonpdemo
最後に、要約すると、クロスドメインソリューションには多くのソリューションがあり、JSONPはその1つにすぎず、特定の状況を詳細に分析する必要があります。この記事があなたに役立つことを願っています。読んでくれてありがとう。 Githubへようこそ、Momo！また、誰もがwulin.comをもっとサポートすることを願っています。