Ajax クロスドメインの問題に対する 2 つの解決策

亚连
リリース: 2018-05-24 16:09:50
オリジナル
1867 人が閲覧しました

ajax 自体は実際には XMLHttpRequest オブジェクトを通じてデータと対話しますが、セキュリティ上の理由から、ブラウザーは js コードによるクロスドメイン操作の実行を許可せず、警告を発行するため、ajax クロスドメインの問題が発生します。

概要

Ajax クロスドメインは、フロントエンド開発における一般的な問題であり、Google ブラウザー Chrome をクライアントとして使用し、Tomcat を Web サーバーとして使用する場合の解決策について説明します。

問題現象

クロスドメインアクセスが発生すると、通常、Ajaxは次のようなエラーを報告します:

XMLHttpRequestはhttp://192.168.2.12:8001/oss/api/version/checkを読み込めません。 Access-Control-Allow-Origin' ヘッダーが要求されたリソースに存在するため、オリジン 'http://localhost:8000' へのアクセスは許可されません。

解決策 1: ブラウザのクロスドメイン セキュリティ設定をオフにします。開発 テストする場合は

を使用します。例として Chrome ブラウザーを使用すると、Chrome ショートカットを右クリックし、Target 値の後に --disable-web-security を追加します。 -- の前にスペースがあることに注意してください。例:

"C:Program Files (x86)GoogleChromeApplicationchrome.exe" --disable-web-security

起動後、Chrome ブラウザは「サポートされていないコマンド ライン フラグを使用しています: --disable」というプロンプトを表示します。 web-security」では、安全ではないため、テストに限定されていると書かれています。

この方法で、クロスドメインエラーなしで直接テストできます。

解決策 2: クロスドメイン アクセスをサポートするように Web サーバーを構成する

ここでは、Web サーバーとして Tomcat を使用するための解決策を示します。Java Web の WEB-INF の下にある web.xml ファイルに次の構成を追加するだけです。プログラム。

<!--cors filter-->
  <filter>
    <filter-name>CorsFilter</filter-name>
    <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  </filter>
  <filter-mapping>
    <filter-name>CorsFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
ログイン後にコピー

注: org.apache.catalina.filters.CorsFilter の下にいくつかの設定オプションがあります。上記の設定がない場合は、システムのデフォルト設定が使用されます。実際の運用環境では、セキュリティを向上させるために必要に応じて設定を行う必要があります。たとえば、cors.allowed.origins は、アクセスを許可する送信元アドレスを構成します。デフォルトは all、つまり * です。さらに、cors.allowed.methods、cors.allowed.headers などがあります。特定の構成の詳細については、この記事の参考文献の [1] を参照してください。

上記は私があなたのためにまとめたものです。

関連記事:

クリックして ajax に基づいて読み込みます 更新せずにこのページをさらに読み込みます

Google Chrome ブラウザでの ajax エラーを解決する方法

jQuery post を使用して特殊文字データを渡す方法の

以上がAjax クロスドメインの問題に対する 2 つの解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート