隨著前後端分離的普及，前端透過 Ajax 技術呼叫後端介面並取得資料已成為 Web 開發中的常見操作。 然而，由於瀏覽器的同源策略，不同來源（協定、網域名稱或連接埠不同）的網頁無法互相存取自己的 DOM 和 Cookie，這就使得跨網域存取成為一個很普遍的需求。針對這個問題，現在已經有許多方法可以解決。 本文將介紹三種 PHP 實作 Ajax 跨域的方法。 一、JSONPJSONP（JSON with Padding）在前端發起跨域請求時是一種很流行的解決方式。它實際上是一種「欺騙」瀏覽器的方式，利用 </code> 標籤沒有跨域限制的特性來實現跨域存取。它的原理是透過在服務端動態產生用於回應請求的JavaScript 程式碼片段，該程式碼片段會呼叫一個特定名稱（回呼函數名）的JavaScript 函數，並將服務端處理的資料作為參數傳遞給此函數，從而達到跨域訪問的效果。 </p><p>JSONP 的使用方式如下：</p><ol><li>客戶端程式碼：</li></ol><div class="code" style="position:relative; padding:0px; margin:0px;"><pre>function handleJsonp(data) { console.log(data); } const script = document.createElement('script'); script.src = 'http://example.com/api?callback=handleJsonp'; document.head.appendChild(script);</pre><div class="contentsignin">登入後複製</div></div><ol start="2"><li>服務端程式碼：</li>##<div class="code" style="position:relative; padding:0px; margin:0px;"><pre><?php $data = array('foo' => 'bar'); $callback = $_GET['callback']; echo sprintf('%s(%s);', $callback, json_encode($data)); ?></pre><div class="contentsignin">登入後複製</div></div></ol>在這段程式碼中，服務端的回傳結果是一個包含回呼函數呼叫的JavaScript 程式碼片段，客戶端得到資料後會自動執行回呼函數，並將服務端傳回的資料當作回呼函數的參數。 <p></p>JSONP 的優點是相容性好，相容性只受到瀏覽器支援<p><script><code> 標籤的程度限制，但缺點是存在安全性問題，因為回呼函數是在客戶端執行的，我們無法保證此函數所執行的是我們期望的邏輯，如果惡意回呼函數傳遞了惡意程式碼，就會存在被XSS 攻擊的風險。 </code></p>二、代理模式<h2></h2>代理模式是另一種比較流行的跨域解決方案。它的基本想法是在服務端設定一個代理程式存取指定網址，然後將從代理伺服器取得的資料傳回給客戶端。透過這種方式，客戶端可以直接存取同源的代理伺服器，代理伺服器再去存取跨網域的目標伺服器，並將目標伺服器傳回的資料進行中轉。 <p></p>代理模式的使用方式如下：<p></p>##客戶端程式碼：<ol><li><div class="code" style="position:relative; padding:0px; margin:0px;"><pre>fetch('http://example.com/proxy_api') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error));</pre><div class="contentsignin">登入後複製</div></div></li></ol>服務端程式碼：<ol start="2"><li><div class="code" style="position:relative; padding:0px; margin:0px;"><pre><?php $url = 'http://example.com/api'; $data = json_decode(file_get_contents($url), true); echo json_encode($data); ?></pre><div class="contentsignin">登入後複製</div></div> </li>在這段程式碼中，客戶端的請求被發送到代理伺服器，代理伺服器在得到目標伺服器回傳的資料後將之回傳給客戶端，這樣就實現了客戶端對跨網域服務的存取。 </ol><p>代理模式的優點是安全性好，因為在客戶端只會存取同源的代理伺服器，代理伺服器再去訪問跨域的目標伺服器，從而有效避免了跨域訪問帶來的安全風險，但缺點是需要額外開發伺服器端程式碼，增加了額外的工作量和開發成本。 </p><p>三、CORS</p><h2>CORS 是目前最受歡迎的跨域存取解決方案。它透過在服務端設定回應頭來告訴客戶端是否允許跨網域訪問，從而實現跨網域存取安全控制。 </h2><p>CORS 的使用方式如下：</p><p>##客戶端程式碼：</p><ol><div class="code" style="position:relative; padding:0px; margin:0px;"><pre>fetch('http://example.com/api', { mode: 'cors' }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error));</pre><div class="contentsignin">登入後複製</div></div><li>服務端程式碼：</ol>##<div class="code" style="position:relative; padding:0px; margin:0px;"><pre><?php header('Access-Control-Allow-Origin: *'); $data = array('foo' => 'bar'); echo json_encode($data); ?></pre><div class="contentsignin">登入後複製</div></div><ol start="2">在這段程式碼中，服務端設定了<li>Access-Control-Allow-Origin:*</li> 回應頭，表示允許所有來源存取該接口，客戶端透過在請求中設定</ol>mode: 'cors'<p> 參數來告知瀏覽器該請求將會進行跨域存取。 <code></code>CORS 的優點是原生支持，不需要額外的開發工作，但其缺點是不支援 IE8/9，還需要從服務端支持，不支援子網域的跨網域存取。 <code></code>以上就是 PHP 實作 Ajax 三種跨域的方法，實際專案中應根據具體情況選擇最適合自己的跨域解決方案。 </p></body></html>
