AngularJS跨域请求API时如何解决跨域问题并正确处理响应？

AngularJS 作为一款经典的前端 JavaScript 框架，在构建单页面应用（SPA）时，经常需要与后端 API 进行数据交互，由于浏览器的同源策略（Same-Origin Policy），跨域请求（Cross-Origin Resource Sharing, CORS）成为开发者必须面对和解决的问题，本文将详细探讨 AngularJS 中实现跨域请求 API 的方法、配置及最佳实践，帮助开发者顺利解决跨域开发难题。

理解同源策略与跨域请求

同源策略是浏览器的一项核心安全机制,它限制了一个源（协议、域名、端口均相同）的文档或脚本如何与另一个源的资源进行交互，当 AngularJS 应用通过 $http 或 $resource 服务请求不同源的 API 时，浏览器会拦截该请求，导致请求失败或无法获取响应数据。

当前应用运行在 http://localhost:8080，而 API 服务部署在 http://api.example.com:3000，由于域名和端口不同，这属于跨域请求，默认情况下，浏览器不会允许前端应用直接访问此类 API，因此需要通过特定方式实现跨域。

AngularJS 跨域请求的实现方案

在 AngularJS 中，解决跨域请求主要有以下几种方式，开发者可根据后端 API 的支持情况选择合适的方案。

后端支持 CORS（推荐）

CORS 是目前最主流、最标准的跨域解决方案，它通过 HTTP 头部让服务器声明哪些外部源可以访问资源，相比 JSONP，CORS 支持所有 HTTP 方法（GET、POST、PUT、DELETE 等），且可以发送和接收自定义头部信息，安全性更高。

实现步骤：

• 后端配置 CORS 头部：后端 API 需要在响应中添加以下 HTTP 头部，允许前端域名访问：

  Access-Control-Allow-Origin: http://localhost:8080  // 允许的源，可设为 * 表示允许所有源
  Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS  // 允许的 HTTP 方法
  Access-Control-Allow-Headers: Content-Type, Authorization  // 允许的自定义头部
  Access-Control-Allow-Credentials: true  // 允许发送凭证（如 Cookies）

  以 Node.js（Express 框架）为例，可通过 cors 中间件实现：

  const express = require('express');
  const cors = require('cors');
  const app = express();
  app.use(cors({
    origin: 'http://localhost:8080',
    methods: ['GET', 'POST', 'PUT', 'DELETE'],
    allowedHeaders: ['Content-Type', 'Authorization'],
    credentials: true
  }));
  app.get('/api/data', (req, res) => {
    res.json({ message: 'CORS 跨域请求成功' });
  });
  app.listen(3000, () => {
    console.log('API 服务器运行在 http://localhost:3000');
  });

• 前端 AngularJS 配置：如果后端已正确配置 CORS，前端 AngularJS 代码无需特殊修改，直接使用 $http 发送请求即可：

  

  angular.module('myApp', [])
    .controller('MainController', function($scope, $http) {
      $http.get('http://api.example.com:3000/api/data')
        .then(function(response) {
          $scope.data = response.data;
        })
        .catch(function(error) {
          console.error('请求失败:', error);
        });
    });

JSONP（仅支持 GET 请求）

JSONP（JSON with Padding）是一种早期的跨域解决方案，它利用 <script> 标签不受同源策略限制的特性，通过动态插入 script 标签加载数据，但 JSONP 仅支持 GET 请求，且存在安全风险（如 XSS 攻击），因此仅适用于不支持 CORS 的旧 API。

实现步骤：

• 后端支持 JSONP：后端需返回 JavaScript 代码，将数据作为回调函数的参数。

  // 后端返回格式示例
  callbackName({"message": "JSONP 跨域请求成功"});

• 前端 AngularJS 使用 $http.jsonp：AngularJS 的 $http 服务提供了 jsonp 方法，支持 JSONP 请求：

  angular.module('myApp', [])
    .controller('MainController', function($scope, $http) {
      var callbackName = 'JSON_CALLBACK'; // AngularJS 默认回调名
      $http.jsonp('http://api.example.com:3000/api/data?callback=' + callbackName)
        .then(function(response) {
          $scope.data = response.data;
        })
        .catch(function(error) {
          console.error('JSONP 请求失败:', error);
        });
    });

  注意：JSONP 请求的 URL 必须包含 callback 参数，且后端需正确处理该参数并返回对应的回调函数调用。

代理服务器（适用于开发环境）

如果后端无法直接修改 CORS 配置，或开发环境中需要跨域调试，可通过代理服务器转发请求，代理服务器作为中间层，将前端请求转发到目标 API，由于代理服务器与前端应用同源，浏览器不会拦截请求。

实现方案：

• 使用 AngularJS 的 $httpBackend 模拟（适用于单元测试）：
  AngularJS 的 $httpBackend 服务可用于模拟后端 API，在开发环境中绕过跨域问题：

  

  angular.module('myApp', [])
    .controller('MainController', function($scope, $httpBackend) {
      // 模拟 GET 请求
      $httpBackend.whenGET('/api/data').respond(200, { message: '代理请求成功' });
      // 发送请求
      $http.get('/api/data')
        .then(function(response) {
          $scope.data = response.data;
        });
      // 确保所有未匹配的请求被转发到真实 API（可选）
      $httpBackend.whenGET(/.*/).passThrough();
    });

• 使用代理工具（如 ngProxy、Webpack DevServer）：
  在开发环境中，可通过 Webpack 的 devServer.proxy 配置代理：

  // webpack.config.js
  module.exports = {
    //...其他配置
    devServer: {
      proxy: {
        '/api': {
          target: 'http://api.example.com:3000',
          changeOrigin: true,
          pathRewrite: { '^/api': '' }
        }
      }
    }
  };

  前端请求时使用相对路径（如 /api/data），Webpack DevServer 会自动将其代理到目标 API。

跨域请求的常见问题与解决方案

预检请求（Preflight Request）

当跨域请求使用非简单方法（如 PUT、DELETE）或包含自定义头部时，浏览器会先发送一个 OPTIONS 请求进行预检，以确认服务器是否允许该请求，如果后端未正确处理 OPTIONS 请求，会导致跨域失败。

解决方案：后端需对 OPTIONS 请求返回正确的 CORS 头部，

HTTP/1.1 204 No Content
Access-Control-Allow-Origin: http://localhost:8080
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type

凭证请求（Credentials）

如果前端需要发送 Cookies 或 HTTP 认证信息，需在 AngularJS 请求中设置 withCredentials: true，且后端需配置 Access-Control-Allow-Credentials: true：

$http.get('http://api.example.com:3000/api/data', {
  withCredentials: true
});

跨域请求的安全性

• 避免将 Access-Control-Allow-Origin 设为 ，尤其是在需要凭证请求时，应明确指定允许的源。
• 对 JSONP 请求的回调函数名进行校验，防止恶意代码注入。

AngularJS 中的跨域请求解决方案需根据实际场景选择：

• 优先使用 CORS：后端支持 CORS 时，这是最安全、最灵活的方式，支持所有 HTTP 方法和自定义头部。
• JSONP 作为备选：仅适用于 GET 请求，且需确保后端支持 JSONP 格式。
• 代理服务器用于开发：在开发环境中，通过代理转发请求可快速解决跨域问题，但不适用于生产环境。

开发者需结合后端 API 的特性、安全性要求及开发环境，选择最适合的跨域方案，确保应用能够稳定、安全地与后端服务交互，通过合理配置，AngularJS 应用可以轻松实现跨域数据请求，构建功能完善的前端应用。