AngularJS跨域时如何正确配置与解决请求被拦截问题？

AngularJS 作为一款经典的前端 JavaScript 框架，在构建单页面应用（SPA）时，经常会遇到跨域请求的问题，跨域（Cross-Origin Resource Sharing, CORS）是浏览器出于安全考虑实施的同源策略（Same-Origin Policy）的体现，即一个域下的网页无法直接访问另一个域下的资源，本文将详细介绍 AngularJS 中跨域问题的成因、解决方案及最佳实践。

跨域问题的成因

同源策略要求协议、域名、端口三个部分完全相同，只要有一个不同，即被视为跨域。http://example.com 访问 https://api.example.com（协议不同）、http://example.com:8080（端口不同）或 http://sub.example.com（域名不同）都会触发跨域限制，在 AngularJS 中，通过 $http 服务发起的 AJAX 请求若涉及跨域，浏览器会先发送一个 OPTIONS 预检请求（Preflight Request），以确认服务器是否允许跨域访问。

AngularJS 跨域解决方案

服务器端 CORS 配置（推荐）

最根本的解决方法是服务器端开启 CORS 支持，通过设置 HTTP 响应头，告知浏览器允许跨域访问，常见的响应头配置如下：

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

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  next();
});

JSONP（仅支持 GET 请求）

JSONP（JSON with Padding）是早期解决跨域的常用方式，其原理是通过动态创建 <script> 标签，利用 <script> 标签的 src 属性不受同源策略限制的特性，AngularJS 中可通过 $http.jsonp 方法实现：

$http.jsonp('http://example.com/api?callback=JSON_CALLBACK')
  .success(function(data) {
    console.log(data);
  });

注意：

• 服务器需支持 JSONP 回调，返回格式为 callbackName({...})；
• 仅支持 GET 请求，不适用于 POST/PUT 等请求；
• 存在安全风险（如 XSS 攻击），需确保服务器可信。

AngularJS $http 后端代理

若无法修改服务器配置,可通过前端代理或后端代理解决，以 Nginx 为例，配置反向代理将跨域请求转发到目标服务器：

location /api/ {
  proxy_pass http://target-server.com/;
  proxy_set_header Host $host;
}

AngularJS 请求本地路径即可：

$http.get('/api/data')
  .then(function(response) {
    console.log(response.data);
  });

$httpProvider 拦截器配置

通过 AngularJS 的拦截器（Interceptor）统一处理跨域请求，可动态修改请求头或响应头，添加自定义请求头：

app.config(function($httpProvider) {
  $httpProvider.interceptors.push(function() {
    return {
      request: function(config) {
        config.headers['Custom-Header'] = 'value';
        return config;
      },
      response: function(response) {
        // 处理响应
        return response;
      }
    };
  });
});

最佳实践与注意事项

1. 优先选择服务器 CORS：最安全、最规范的解决方案，适用于现代 Web 应用。
2. JSONP 的局限性：仅适用于简单 GET 请求，且需谨慎处理回调函数。
3. 代理方案适用场景：适用于开发环境或无法修改服务器配置的情况。
4. 凭证请求处理：若需跨域发送 cookies 或 HTTP 认证，需设置 withCredentials: true，并确保服务器响应 Access-Control-Allow-Credentials: true。
5. 安全考虑：避免使用 Access-Control-Allow-Origin: * 与 Allow-Credentials 同时启用，可能导致安全漏洞。

AngularJS 中的跨域问题可通过多种方式解决，其中服务器端 CORS 配置是推荐的最佳实践，JSONP 和代理方案可作为补充手段，但需根据实际场景权衡安全性与便利性，开发时应优先考虑遵循同源策略的安全模型，确保应用在功能完备的同时兼顾安全性，通过合理配置服务器或利用 AngularJS 的拦截器机制，可有效规避跨域限制，提升开发效率。