ホームページ ウェブフロントエンド jsチュートリアル クロスドメイン アクセスを実現するために Ajax をセットアップする方法

クロスドメイン アクセスを実現するために Ajax をセットアップする方法

Apr 02, 2018 pm 04:01 PM
ajax 成し遂げる アクセス

今回は、クロスドメイン アクセスを実現するための Ajax の設定方法について説明します。実際のケースを見てみましょう。 ajax のクロスドメイン アクセスは古い問題です。多くの解決策があります。JSONP メソッドは非公式のメソッドであり、このメソッドは GET メソッドのみをサポートしています。 POSTメソッド。

jQuery

のjsonpメソッドを使用してタイプをPOSTにしても、自動的にGETに変更されます。 公式の問題の説明:

「script」: 応答を

JavaScript として評価し、URL にクエリ文字列パラメータ「_=[TIMESTAMP]」を追加することでキャッシュを無効にします。キャッシュ オプションは true に設定されています。注: これにより、リモート ドメイン リクエストの POST が GET に変わります。 ドメイン間で POST を使用する場合は、非表示の iframe を作成してそれを実現できます。原理は、Ajax アップロードと同じです。画像はありますが、これはさらに面倒になります。

したがって、

Access-Control-Allow-Origin

を設定することでクロスドメイン アクセスを実現するのは比較的簡単です。

例: クライアントのドメイン名は www.client.com で、要求されたドメイン名は www.server.com です

ajax を使用して直接アクセスすると、次のエラーが発生します

XMLHttpRequest は http を読み込めません://www.server.com /server.PHP。要求された

リソース

に 'Access-Control-Allow-Origin' ヘッダーが存在しないため、Origin 'http://www.client.com' はアクセスを許可されません。リクエストされたレスポンスの .

ヘッダーに

// 指定允许其他域名访问 
header('Access-Control-Allow-Origin:*'); 
// 响应类型 
header('Access-Control-Allow-Methods:POST'); 
// 响应头设置 
header('Access-Control-Allow-Headers:x-requested-with,content-type');
ログイン後にコピー
を追加すると、ajax POST のクロスドメイン アクセスを実現できます。

コードは次のとおりです:

client.html パス: http://www.client.com/client.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
 <head> 
 <meta http-equiv="content-type" content="text/html;charset=utf-8"> 
 <title> 跨域测试 </title> 
 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
 </head> 
 <body> 
 <p id="show"></p> 
 <script type="text/javascript"> 
 $.post("http://www.server.com/server.php",{name:"fdipzone",gender:"male"}) 
 .done(function(data){ 
 document.getElementById("show").innerHTML = data.name + ' ' + data.gender; 
 }); 
 </script> 
 </body> 
</html>
ログイン後にコピー
server.php パス: http://www.server.com/server.php

<?php 
$ret = array( 
 'name' => isset($_POST['name'])? $_POST['name'] : '', 
 'gender' => isset($_POST['gender'])? $_POST['gender'] : '' 
); 
header('content-type:application:json;charset=utf8'); 
header('Access-Control-Allow-Origin:*'); 
header('Access-Control-Allow-Methods:POST'); 
header('Access-Control-Allow-Headers:x-requested-with,content-type'); 
echo json_encode($ret); 
?>
ログイン後にコピー
Access -Control-Allow-Origin:* は、任意のドメイン名からのクロスドメイン アクセスを許可することを意味します

クロスドメイン アクセスを許可するために

ドメイン名を指定

する必要がある場合は、Access-Control-Allow-Origin を変更するだけです: * Access-Control-Allow-Origin:

許可されたドメイン名例: header('Access-Control-Allow-Origin:http://www.client.com');

必要な場合

アクセスを許可するには、複数のドメイン名を設定します

、ここで使用する必要があります php で処理します

たとえば、www.client.com と www.client2.com にクロスドメイン アクセスを許可します

server.php を変更しますto

<?php 
$ret = array( 
 'name' => isset($_POST['name'])? $_POST['name'] : '', 
 'gender' => isset($_POST['gender'])? $_POST['gender'] : '' 
); 
header('content-type:application:json;charset=utf8'); 
$origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : ''; 
$allow_origin = array( 
 'http://www.client.com', 
 'http://www.client2.com' 
); 
if(in_array($origin, $allow_origin)){ 
 header('Access-Control-Allow-Origin:'.$origin); 
 header('Access-Control-Allow-Methods:POST'); 
 header('Access-Control-Allow-Headers:x-requested-with,content-type'); 
} 
echo json_encode($ret); 
?>
ログイン後にコピー

ソースコードのダウンロードアドレス:

http://xiazai.jb51.net/ 201702/yuanma/demo(jb51.net)以下は他のネチズンからの追加です:

私が使用していたとき最近、cocos2d-js でゲームを作成しましたが、ローカルで ajax クロスドメイン アクセス リクエストを使用すると、エラーが発生しました:

XMLHttpRequest http://www.zjblogs.com/ を読み込めません。「Access-Control-Allow-Origin」ヘッダーがありません。要求されたリソースにオリジン 'null' が存在するため、アクセスは許可されません。


オンラインで確認したところ、解決策は次のとおりです:

1. 要求された URL が aspx ページの場合、aspx にコードを追加する必要があります。 page: Response.AddHeader("Access-Control-Allow-Origin", "*");

2. リクエストされた URL が PHP ページの場合は、PHP ページにコードを追加する必要があります: header("Access-Control -Allow-Origin: *");

3. リクエストされた URL が静的 HTML ページの場合は、メタ タグ コードをページに追加する必要があります:

ここでの * は、すべてのドメイン名へのアクセスが許可されていることを意味します。サーバーがどのドメイン名にアクセスするかを判断できる場合は、上記のコードの「*」を特定のドメイン名に置き換えることが最適です。これにより、セキュリティが強化されます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

Ajax を使用して登録およびアバターのアップロード機能を実装する

Ajax と $.ajax の使用方法

以上がクロスドメイン アクセスを実現するために Ajax をセットアップする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

Huawei 携帯電話にデュアル WeChat ログインを実装するにはどうすればよいですか? Huawei 携帯電話にデュアル WeChat ログインを実装するにはどうすればよいですか? Mar 24, 2024 am 11:27 AM

Huawei 携帯電話にデュアル WeChat ログインを実装するにはどうすればよいですか?

Huawei携帯電話にWeChatクローン機能を実装する方法 Huawei携帯電話にWeChatクローン機能を実装する方法 Mar 24, 2024 pm 06:03 PM

Huawei携帯電話にWeChatクローン機能を実装する方法

PHP プログラミング ガイド: フィボナッチ数列を実装する方法 PHP プログラミング ガイド: フィボナッチ数列を実装する方法 Mar 20, 2024 pm 04:54 PM

PHP プログラミング ガイド: フィボナッチ数列を実装する方法

Ajaxを使用してPHPメソッドから変数を取得するにはどうすればよいですか? Ajaxを使用してPHPメソッドから変数を取得するにはどうすればよいですか? Mar 09, 2024 pm 05:36 PM

Ajaxを使用してPHPメソッドから変数を取得するにはどうすればよいですか?

Golang がゲーム開発の可能性を可能にする方法をマスターする Golang がゲーム開発の可能性を可能にする方法をマスターする Mar 16, 2024 pm 12:57 PM

Golang がゲーム開発の可能性を可能にする方法をマスターする

PHP ゲーム要件実装ガイド PHP ゲーム要件実装ガイド Mar 11, 2024 am 08:45 AM

PHP ゲーム要件実装ガイド

jQuery AJAX エラー 403 の問題を解決するにはどうすればよいですか? jQuery AJAX エラー 403 の問題を解決するにはどうすればよいですか? Feb 23, 2024 pm 04:27 PM

jQuery AJAX エラー 403 の問題を解決するにはどうすればよいですか?

PHP と Ajax: 動的に読み込まれるコンテンツを作成するためのソリューション PHP と Ajax: 動的に読み込まれるコンテンツを作成するためのソリューション Jun 06, 2024 pm 01:12 PM

PHP と Ajax: 動的に読み込まれるコンテンツを作成するためのソリューション

See all articles