Ajax跨網域存取的測試

上次發現ajax在存取上有跨網域的問題後,就一直想試看看解決的方法,
為了安全性考量,在跨網域存取時,必須得到對方網域的同意才能存取。
所以到網路下載一個免安裝的Apache+MySQL的程式:UniServerZ
解壓縮後,直接執行就可以開啟Apache Web Site,很方便測試。

先寫一個簡單PHP網頁test01.php:
<?php
    echo "我是PHP回傳的值";
?>

再寫一個用ajax呼叫的網頁index.html,放在與UniServerZ不同的目錄內:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>AJAX 測試01</title>
    </head>
    <body>
<section id="d4">按下PHP測試</section>
<section id="d5"></section>
    </body>
<script src="js/jquery-2.1.3.min.js"></script>
    <script type="text/javascript">
$("#d4").click(function(){
   $.ajax({
                url: "http://localhost/test01.php",
                success: function(msg){
   alert("成功");
                    $("#d5").append(msg);
                },
   error: function(){
                    alert( "錯誤" );
                }
            });
});
    </script>
</html>

用瀏覽器開啟index.html後測試,果然出現了網域存取錯誤:
XMLHttpRequest cannot load http://localhost/test01.php.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'null' is therefore not allowed access.


接著在test01.php加上一行語法,就可以成功存取跨網域的資料
header("Access-Control-Allow-Origin: *");
* 表示所有網站都可以存取;也可以單獨立指定網域,如http://test.com,

完整語法如下:
<?php
    header("Access-Control-Allow-Origin: *");
    echo "我是PHP回傳的值";
?>