ホームページ ウェブフロントエンド jsチュートリアル Javascript クロスドメインリクエストに対する 4 つの解決策_JavaScript スキル

Javascript クロスドメインリクエストに対する 4 つの解決策_JavaScript スキル

May 16, 2016 pm 05:40 PM
聞く クロスドメイン

クロスドメイン はどのような状況で発生しますか?
ドメイン名が http://www.example.com.cn/ であると仮定します。
要求されたドメイン名がこのドメイン名と異なる場合、クロスドメインには抜け穴があるため、この状況はクロスドメインになります。通常、クロスドメインリクエストメソッドはリクエストできません。
解決策:
1. window.name
1. サーバーは
コードを返します。 コードは次のとおりです:

<script>window.name='{"id":"3", "name":"leisure"} ';&lt ;/script> <br>2. onload イベントを追加します<iframe id="iframe1" onload="iLoad"><br><script type="text/javascript" > <br>varload = false; <br>function iLoad() { <br>if(load == false) { <br>// 同じドメイン処理、リクエスト後に iframe が再度ロードされます <br> document.getElementById( 'iframe1').contentWindow.location = '/'; <br>load = true; <br>} else { <br>// window.name のコンテンツを取得する必要があることに注意してください。同じドメイン処理です! <br>var data = document.getElementById('iframe1').contentWindow.name; <br>alert(data) // {"id":"3", "name":"leisure"} <br>load = false; <br>} <br>} <br></script>

3. フォームのターゲットを iframe の ID に設定し、フォームを送信します。
コードをコピー コードは次のとおりです:



2. JSONP サーバーは callback({"id": "3", "name": "leisure"});

コードをコピーします。 コードは次のとおりです。



3. jQuery.getJSON
サーバーは json 形式のデータを返します test({"id": "3", "name": "leisure"}); テスト関数 名前はコールバックパラメータで定義されています

コードをコピーします コードは次のとおりです
$.getJSON(url " ?callback=?", data, function(data) {
}


callback=? パラメータに注意してください。 jQuery は疑問符を置き換える関数名を自動的に生成します。これは実際には JSONP を使用して実装されます。

4. Flash クロスドメイン
crossdomain.xml をサーバーに追加します http://www.example.com.cn/crossdomain.xml


コードをコピーします コードは次のとおりです:
<ドメインからのアクセスを許可="*.another.com.cn" />

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

PHP セッションのクロスドメイン問題の解決策 PHP セッションのクロスドメイン問題の解決策 Oct 12, 2023 pm 03:00 PM

PHPSession のクロスドメイン問題の解決策 フロントエンドとバックエンドの分離の開発では、クロスドメイン要求が標準になっています。クロスドメインの問題に対処するときは、通常、セッションの使用と管理が必要になります。ただし、ブラウザーのオリジンポリシーの制限により、デフォルトではセッションをドメイン間で共有できません。この問題を解決するには、いくつかの技術と方法を使用して、セッションのクロスドメイン共有を実現する必要があります。 1. ドメイン間でセッションを共有するための Cookie の最も一般的な使用法

Vue でクロスドメインリクエストを行うにはどうすればよいですか? Vue でクロスドメインリクエストを行うにはどうすればよいですか? Jun 10, 2023 pm 10:30 PM

Vue は、最新の Web アプリケーションを構築するための人気のある JavaScript フレームワークです。 Vue を使用してアプリケーションを開発する場合、多くの場合、異なるサーバー上にあるさまざまな API と対話する必要があります。クロスドメイン セキュリティ ポリシーの制限により、Vue アプリケーションが 1 つのドメイン名で実行されている場合、別のドメイン名の API と直接通信することはできません。この記事では、Vue でクロスドメイン リクエストを行うためのいくつかの方法を紹介します。 1. プロキシを使用する 一般的なクロスドメイン ソリューションは、プロキシを使用することです。

Flask-CORS を使用してクロスドメインのリソース共有を実現する方法 Flask-CORS を使用してクロスドメインのリソース共有を実現する方法 Aug 02, 2023 pm 02:03 PM

Flask-CORS を使用してクロスドメイン リソース共有を実現する方法 はじめに: ネットワーク アプリケーション開発において、クロスドメイン リソース共有 (CrossOriginResourceSharing、CORS と呼ばれる) は、サーバーが指定されたソースまたはドメイン名とリソースを共有できるようにするメカニズムです。 CORS を使用すると、異なるドメイン間のデータ送信を柔軟に制御し、安全で信頼性の高いクロスドメイン アクセスを実現できます。この記事では、Flask-CORS 拡張ライブラリを使用して CORS 機能を実装する方法を紹介します。

HTML で画像とキャンバスのクロスドメイン使用を許可するにはどうすればよいですか? HTML で画像とキャンバスのクロスドメイン使用を許可するにはどうすればよいですか? Aug 30, 2023 pm 04:25 PM

画像とキャンバスをドメイン間で使用できるようにするには、サーバーの HTTP 応答に適切な CORS (Cross-Origin Resource Sharing) ヘッダーを含める必要があります。これらのヘッダーを設定して、特定のソースまたはメソッドを許可したり、任意のソースがリソースにアクセスできるようにしたりすることができます。 HTML キャンバスHTML5 キャンバスは、JavaScript コードによって制御される Web ページ上の長方形の領域です。画像、図形、テキスト、アニメーションなど、あらゆるものをキャンバス上に描画できます。キャンバスは同意します。

コンテキストを使用して Go でリクエストの再試行戦略を実装する方法 コンテキストを使用して Go でリクエストの再試行戦略を実装する方法 Jul 21, 2023 pm 04:39 PM

コンテキストを使用して Go でリクエストの再試行戦略を実装する方法 はじめに: 分散システムを構築する場合、ネットワーク リクエストは必然的にいくつかの失敗に遭遇します。システムの信頼性と安定性を確保するために、通常、再試行戦略を使用してこれらの失敗したリクエストを処理し、リクエストの成功率を高めます。 Go 言語では、コンテキスト パッケージを使用してリクエストの再試行戦略を実装できます。この記事では、Go でコンテキスト パッケージを使用してリクエストの再試行戦略を実装する方法をコード例とともに紹介します。 1. とは

Nginx がリクエスト URL に基づいてリクエスト リライト構成を実装する方法 Nginx がリクエスト URL に基づいてリクエスト リライト構成を実装する方法 Nov 08, 2023 pm 04:15 PM

Nginx は軽量で高性能な Web サーバーであり、リバース プロキシやロード バランシングなどの高度な機能をサポートするだけでなく、強力なリクエスト書き換え機能も備えています。実際の Web アプリケーションでは、多くの場合、より良いユーザー エクスペリエンスと検索エンジンの最適化効果を実現するために、リクエスト URL を書き換える必要があります。この記事では、Nginx がリクエスト URL に基づいてリクエスト書き換え設定を実装する方法を、具体的なコード例も含めて紹介します。書き換え構文 Nginx では、rewrite ディレクティブを使用してリクエストの書き換えを実行できます。その基本的な言語

Vue テクノロジー開発で遭遇するクロスドメインの問題とその解決策 Vue テクノロジー開発で遭遇するクロスドメインの問題とその解決策 Oct 08, 2023 pm 09:36 PM

Vue テクノロジーの開発中に遭遇するクロスドメインの問題と解決策 概要: この記事では、Vue テクノロジーの開発中に遭遇する可能性のあるクロスドメインの問題と解決策を紹介します。まずクロスオリジンの原因から始めて、次にいくつかの一般的な解決策を取り上げ、具体的なコード例を示します。 1. クロスドメイン問題の原因 Web 開発では、ブラウザのセキュリティ ポリシーにより、ブラウザは、あるソース (ドメイン、プロトコル、またはポート) から別のソースのリソースに対するリクエストを制限します。これはいわゆる「同一生成元ポリシー」です。 Vue テクノロジーを開発しているとき、フロントエンドと

LaravelのHeadリクエストメソッドの一般的なアプリケーションシナリオ LaravelのHeadリクエストメソッドの一般的なアプリケーションシナリオ Mar 06, 2024 pm 09:33 PM

Laravel の Head リクエスト メソッドの一般的なアプリケーション シナリオ Laravel では、通常、HTTP リクエスト メソッドの HEAD メソッドは、実際のコンテンツを取得せずにリソースのメタデータを取得するために使用されます。 HEAD リクエストは GET リクエストに似ていますが、実際の応答本文の内容は返さず、応答ヘッダー情報のみを返します。これにより、HEAD リクエストは特定のシナリオで非常に役立ちます。次に、いくつかの一般的なアプリケーション シナリオと対応するコード例を示します。 HEAD リクエスト メソッドを使用してリンクの有効性を検証します。チェーンを検証するために使用できます。

See all articles