Java Script 跨域請求

平日寫App慣了，在App呼叫遠端PHP程式存取資料庫是件相當自然的事。但近期有個Case是以Web方式開發，透過AJAX存取另一Server上的PHP時卻罷工了，追查一下發現是跨域請求造成的問題，在這邊筆記一下。

還原現場

• 有一個存放於遠端Server的PHP程式，它會讀取資料庫並傳回結果，使用的資料格式為JSON。

query.php

<?php
 //存取資料庫，略！
 $arr = array(
  "id" => "a01",
  "name" => "elephant"
 );    
 echo json_encode($arr);
?>

• 本機有一JavaScript，以jQuery提供的ajax function呼叫遠端PHP取回JSON字串。

search.js

$.ajax({
 method: "POST",
 url: "http://遠端Server IP/query.php",
 dataType: "json"
}).done(function(data) {
 alert(data.name);
}).fail(function() {
 alert("fail");
});

• 執行看看，將跳出fail的alert。

錯誤訊息

目前主流的瀏覽器皆內建了開發人員工具，這邊以Firefox為例，執行前述提到的query.js，將看到如下的錯誤訊息：

相當親民的訊息，直接告訴你這是跨域請求的問題，缺少了Access-Control-Allow-Origin檔頭。

解決跨域資源請求之問題

在此以這篇文章「js跨域访问，No ‘Access-Control-Allow-Origin‘ header is present on」提供的方法來解。文內亦有提到跨域存取之細節，有興趣可以讀讀看。欲解決此問題，必須在前述的PHP程式加入「header("Access-Control-Allow-Origin: *");」。

<?php
 header("Access-Control-Allow-Origin: *");
 //存取資料庫，略！
 $arr = array(
  "id" => "a01",
  "name" => "elephant"
 );
 echo json_encode($arr);
?>