總結三種PHP實作Ajax跨域的方法

隨著前後端分離的普及，前端透過 Ajax 技術呼叫後端介面並取得資料已成為 Web 開發中的常見操作。

然而，由於瀏覽器的同源策略，不同來源（協定、網域名稱或連接埠不同）的網頁無法互相存取自己的 DOM 和 Cookie，這就使得跨網域存取成為一個很普遍的需求。針對這個問題，現在已經有許多方法可以解決。

本文將介紹三種 PHP 實作 Ajax 跨域的方法。

一、JSONP

JSONP（JSON with Padding）在前端發起跨域請求時是一種很流行的解決方式。它實際上是一種「欺騙」瀏覽器的方式，利用 <script> 標籤沒有跨域限制的特性來實現跨域存取。它的原理是透過在服務端動態產生用於回應請求的JavaScript 程式碼片段，該程式碼片段會呼叫一個特定名稱（回呼函數名）的JavaScript 函數，並將服務端處理的資料作為參數傳遞給此函數，從而達到跨域訪問的效果。

JSONP 的使用方式如下：

1. 客戶端程式碼：

function handleJsonp(data) {
  console.log(data);
}
const script = document.createElement('script');
script.src = 'http://example.com/api?callback=handleJsonp';
document.head.appendChild(script);

2. 服務端程式碼：
##

<?php
$data = array(&#39;foo&#39; => 'bar');
$callback = $_GET['callback'];
echo sprintf('%s(%s);', $callback, json_encode($data));
?>

在這段程式碼中，服務端的回傳結果是一個包含回呼函數呼叫的JavaScript 程式碼片段，客戶端得到資料後會自動執行回呼函數，並將服務端傳回的資料當作回呼函數的參數。

JSONP 的優點是相容性好，相容性只受到瀏覽器支援

<script> 標籤的程度限制，但缺點是存在安全性問題，因為回呼函數是在客戶端執行的，我們無法保證此函數所執行的是我們期望的邏輯，如果惡意回呼函數傳遞了惡意程式碼，就會存在被XSS 攻擊的風險。

二、代理模式

代理模式是另一種比較流行的跨域解決方案。它的基本想法是在服務端設定一個代理程式存取指定網址，然後將從代理伺服器取得的資料傳回給客戶端。透過這種方式，客戶端可以直接存取同源的代理伺服器，代理伺服器再去存取跨網域的目標伺服器，並將目標伺服器傳回的資料進行中轉。

代理模式的使用方式如下：

##客戶端程式碼：

1. fetch('http://example.com/proxy_api')
     .then(response => response.json())
     .then(data => console.log(data))
     .catch(error => console.error(error));

服務端程式碼：

2. <?php
   $url = &#39;http://example.com/api&#39;;
   $data = json_decode(file_get_contents($url), true);
   echo json_encode($data);
   ?>

在這段程式碼中，客戶端的請求被發送到代理伺服器，代理伺服器在得到目標伺服器回傳的資料後將之回傳給客戶端，這樣就實現了客戶端對跨網域服務的存取。

代理模式的優點是安全性好，因為在客戶端只會存取同源的代理伺服器，代理伺服器再去訪問跨域的目標伺服器，從而有效避免了跨域訪問帶來的安全風險，但缺點是需要額外開發伺服器端程式碼，增加了額外的工作量和開發成本。

三、CORS

CORS 是目前最受歡迎的跨域存取解決方案。它透過在服務端設定回應頭來告訴客戶端是否允許跨網域訪問，從而實現跨網域存取安全控制。

CORS 的使用方式如下：

##客戶端程式碼：

fetch('http://example.com/api', {
  mode: 'cors'
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

1. 服務端程式碼：

##

<?php
header(&#39;Access-Control-Allow-Origin: *&#39;);
$data = array(&#39;foo&#39; => 'bar');
echo json_encode($data);
?>

在這段程式碼中，服務端設定了
2. Access-Control-Allow-Origin:*
回應頭，表示允許所有來源存取該接口，客戶端透過在請求中設定

mode: 'cors'

參數來告知瀏覽器該請求將會進行跨域存取。 CORS 的優點是原生支持，不需要額外的開發工作，但其缺點是不支援 IE8/9，還需要從服務端支持，不支援子網域的跨網域存取。 以上就是 PHP 實作 Ajax 三種跨域的方法，實際專案中應根據具體情況選擇最適合自己的跨域解決方案。

以上是總結三種PHP實作Ajax跨域的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！