AJAXクロスドメイン問題(3つの解決策)
2022-02-25 10:48:31
なぜ、クロスドメインで
-
クロスドメイン問題は、JavaScriptの同一生成元ポリシーに起因しており、プロトコル+ホスト名+ポート番号(存在する場合)が同じ場合にのみ相互アクセスを許可しています。つまり、JavaScriptは自ドメインのリソースにのみアクセスし操作することができ、他ドメインのリソースにはアクセスできないのです。クロスドメインの問題は、JSとajaxの場合です。html自体には、aタグ、scriptタグ、さらにはformタグ(ドメインを越えて直接データを送受信できる)等、クロスドメインの問題はありません。
クロスドメインに関する問題の解決方法
-
JSONP
JSONPは、JSON with Paddingの短縮名です。これは、サーバー側のScriptタグをjavascriptコールバックの形でクロスドメインアクセスのためにクライアントに戻す統合を可能にする非公式プロトコルです(これはJSONPの単純な実装に過ぎない)。jsonpがどのように使用されるかについては http://blog.csdn.net/alen1985/article/details/6365394 jsonpのメリットとデメリットは、以下のページに記載されています。 http://blog.csdn.net/z69183787/article/details/19191385 -
クロスドメインを許可するレスポンスヘッダを追加する
addHeader('Access-Control-Allow-Origin:*');//すべてのソースからのアクセスを許可する。
addHeader('Access-Control-Allow-Method:POST,GET');// アクセスを許可する。 -
プロキシメソッド
サーバーAのtest01.htmlページは、サーバーBのバックエンドのアクションにアクセスし、"テスト&quotを返すようにしたい、この時点でクロスドメインの要求があるため、ブラウザコンソールは、エラーメッセージを表示しますサーバーバックエンドには、問題を持っていないのクロスドメインは、ブラウザの同一起源ポリシーによって引き起こされると、あなたは、サーバーBのアクションデータの要求を完了するアクションでは、プロキシアクションを追加して、テスト01.htmlページに戻りすることができます。あなたは、サーバーAにプロキシアクションを追加し、アクションでサーバーBのアクションデータの要求を完了し、その後、test01.htmlページに戻ることができます。
Demo1 (クロスドメインリクエストを許可するレスポンスヘッダを追加する)
-
htmlページ
-
ウェブバックエンド
上記のアクセスに従い、127.0.0.1:8080 と localhost:8081 はドメインとポートが異なるため、同じクロスドメインの問題が発生します。
次に、add response header を使用します。
Demo2 (jsonpのコールバックメソッド)
このデモは、バックエンドにウェブサービス・インターフェースを持つjquery ajaxです。
この時点のdataTypeはjsonp形式であることに注意し、バックエンドの受信を見ます。
私たちが返すものは、実際に関数呼び出しのテキストですが、コールバックの名前は、前景がコールバック関数を指定しないように、ここで自動的に生成されたことに注意してください、あなたは次のようにコールバック関数名をカスタマイズしたい場合は、行の要求パラメータを追加する
これは、バックエンドのコールバック関数の名前を mytest に変更します。
ブラウザから送信されるリクエストデータとレスポンスデータの形式は次のようになっており、実際には関数の呼び出しを返し、返すべきデータは関数のパラメータ値として記入されます。
この時点でコンソールに "hello world" が表示されるようになります。
お勧めの参考文献
http://www.cnblogs.com/chopper/archive/2012/03/24/2403945.html
関連
-
[解決済み] エラー「SCRIPT7002」の解決方法について。XMLHttpRequest: IEで「ネットワークエラー 0x80070005, アクセスは拒否されました。
-
[解決済み] AJAXはRest apiなのか
-
[解決済み] check_ajax_referer() は実際どのように動作するのでしょうか?
-
[解決済み] RichFacesのa4j:ajaxタグのevent属性の取りうる値のリスト
-
(フロントエンド)警告。メインスレッドでの XMLHttpRequest の同期は非推奨です。
-
Uncaught SyntaxError: 位置 0 で JSON の予期しないトークンです。
-
jS Ajaxアップロードファイルのエラー "Uncaught TypeError: 不正な呼び出し"
-
AjaxにおけるbeforeSend関数の使用について
-
ajax+jsonを使用します。
-
PDOException "could not find driver" (ドライバが見つかりません)
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Google Maps APIがAJAX使用時のみ「Uncaught ReferenceError: google is not defined」を投げる。
-
[解決済み] AJAX使用時にGoogle Maps APIが "Uncaught ReferenceError: google is not defined "を投げる。
-
[解決済み] ajaxの応答を待つためにseleniumを取得する方法?
-
[解決済み] <p:ajax>イベント一覧
-
ajax リクエストが Uncaught TypeError を報告しました。不正な呼び出しエラー
-
リソースの読み込みに失敗しました:サーバーはステータス 400 (Bad Request) で応答しました。
-
onclickイベントの値を渡して、ajaxリクエストの実行に移る
-
Captcha機能とlayUIの検証