解決 AngularJS $http 跨域請求失敗的實戰方案

問題背景

在學習 AngularJS 的 $http 服務獲取 JSON 數據時，許多開發者會直接複製 W3CSchool 或菜鳥教程上的示例代碼，但發現完全無法運行。瀏覽器控制台報錯：

已阻止跨源請求：同源策略禁止讀取位於 https://www.runoob.com/try/angularjs/data/Customers_JSON.php 的遠程資源。（原因：CORS 頭缺少 'Access-Control-Allow-Origin'）。

核心原因分析

這是典型的跨域（CORS）問題。原始代碼嘗試從 runoob.com 獲取數據，但該服務器未設置允許跨域的響應頭。同源策略是瀏覽器的安全機制，禁止腳本跨域訪問資源。

解決方案：使用 Yahoo YQL 代理

既然目標 API 不支持 CORS，我們可以利用 Yahoo YQL（現已停止服務，但原理通用）作為代理層。YQL 允許跨域請求並返回 JSON 格式數據。

<!DOCTYPE html>
<html>
<body>
<div ng-app="" ng-controller="customersController">
  <ul>
    <li ng-repeat="x in names"> {{ x.Name + ', ' + x.Country }} </li>
  </ul>
</div>
<script>
function customersController($scope, $http) {
  $http({
    method: 'GET',
    url: "https://query.yahooapis.com/v1/public/yql",
    params: {
      q: 'select * from json where url="https://www.runoob.com/try/angularjs/data/Customers_JSON.php"',
      format: "json"
    }
  }).success(function(response) {
    console.log(response);
    $scope.names = response.query.results.json.json;
  });
}
</script>
<script src="https://apps.bdimg.com/libs/angular.js/1.2.15/angular.min.js"></script>
</body>
</html>

關鍵點解析

• YQL 查詢語句：`select * from json where url="目標API地址"` 讓 YQL 幫我們獲取並轉換 JSON
• 數據路徑調整：響應結構變為 `response.query.results.json.json`，需根據實際返回調整
• 現代替代方案：YQL 已停服，生產環境建議自建代理服務或使用 CORS Anywhere 等開源代理

本地 JSON 文件無法讀取的補充說明

若改用本地 JSON 文件仍無反應，通常是因為：

1. 直接雙擊 HTML 文件打開（file:// 協議），瀏覽器阻止本地文件異步請求
2. 需啟動本地服務器（如 `http-server`、VS Code Live Server、nginx 等）通過 https:// 訪問

總結

跨域是前端開發必遇的坑。理解同源策略、掌握代理轉發、配置 CORS 頭是核心技能。學習時勿盲目複製代碼，要看懂網絡請求流程，善用瀏覽器開發者工具分析 Network 和 Console 面板。