ajax はクロスドメインアクセスを実現するために Access-Control-Allow-Origin を設定します-PHPチュートリアル-php.cn

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

WBOY

リリース： 2016-08-08 09:23:10

オリジナル

863 人が閲覧しました

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チュートリアルに興味のある友人の参考になれば幸いです。