1. ホーム
  2. アジャックス

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;テスト&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