ホームページ >バックエンド開発 >PHPチュートリアル >ajax はクロスドメイン アクセスを実現するために Access-Control-Allow-Origin を設定します

ajax はクロスドメイン アクセスを実現するために Access-Control-Allow-Origin を設定します

WBOY
WBOYオリジナル
2016-08-08 09:23:10884ブラウズ

ajax のクロスドメイン アクセスは古い問題であり、多くの解決策があります。最も一般的に使用されるのは JSONP メソッドであり、このメソッドは GET メソッドのみをサポートします。 POST メソッドほど安全ではありません。

jqueryのjsonpメソッドを使用してタイプをPOSTにしても、自動的にGETに変更されます。


公式の問題の説明:


「script」: 応答を JavaScript として評価し、クエリ文字列パラメータ「_=[TIMESTAMP]」を URL に追加することでキャッシュを無効にします。キャッシュ オプションが 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' へのアクセスは許可されません .

リクエストされた Response ヘッダーに


// を追加して、他のドメイン名がアクセスできることを指定します


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" c/html;charset=utf-8">
  <title> 跨域测试 </title>
  <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
 </head>

 <body>
    <div id="show"></div>
    <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(
    &#39;name&#39; => 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

' ; server.php は

<?php
$ret = array(
    &#39;name&#39; => 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);
?>

ソースコードのダウンロードアドレス: クリックして表示 以上、クロスドメインアクセスを実現するためのajaxのAccess-Control-Allow-Originの設定方法を内容も含めて紹介しましたので、PHPチュートリアルに興味のある友人の参考になれば幸いです。

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