AngularJS跨域时如何正确配置与解决？

AngularJS 作为一款经典的前端 JavaScript 框架，在构建单页面应用（SPA）时，经常需要与后端 API 进行数据交互，由于浏览器的同源策略（Same-Origin Policy），跨域请求成为开发者必须面对和解决的重要问题，本文将系统介绍 AngularJS 中跨域问题的成因、常见解决方案及其实现细节,帮助开发者高效处理跨域数据交互。

跨域问题的本质：同源策略的限制

同源策略是浏览器的一种安全机制，它规定仅当协议（protocol）、域名（domain）、端口（port）三者完全一致时，浏览器才允许页面中的脚本读取另一个窗口或资源的响应数据，前端应用运行在 http://localhost:8080，而后端 API 服务部署在 http://api.example.com:3000，由于域名和端口不同，浏览器会阻止前端直接获取后端返回的数据,从而触发跨域错误。

在 AngularJS 中，这一问题主要体现在 $http 服务发起的 AJAX 请求上，当请求的目标 URL 与当前页面的源不同时，浏览器会在控制台报错，提示“No ‘Access-Control-Allow-Origin’ header is present on the requested resource”等信息。

AngularJS 跨域解决方案及实现

服务端 CORS 配置（推荐方案）

跨域资源共享（Cross-Origin Resource Sharing, CORS）是 W3C 标准化的跨域解决方案，通过在服务端添加特定的 HTTP 头部，允许浏览器跨域访问资源,这是目前最常用且兼容性最好的方法。

实现步骤：
服务端需在响应头中添加以下字段：

• Access-Control-Allow-Origin：允许跨域的源（如 表示所有源，或具体域名如 http://localhost:8080）；
• Access-Control-Allow-Methods：允许的 HTTP 方法（如 GET, POST, PUT, DELETE）；
• Access-Control-Allow-Headers：允许的自定义请求头（如 Content-Type, Authorization）；
• Access-Control-Allow-Credentials：是否允许携带 cookies（需设置为 true）。

示例（Node.js + Express）：

const express = require('express');
const app = express();
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'http://localhost:8080');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.header('Access-Control-Allow-Credentials', 'true');
  next();
});
app.get('/api/data', (req, res) => {
  res.json({ message: '跨域请求成功' });
});
app.listen(3000, () => console.log('Server running on port 3000'));

注意事项：

• 若前端请求携带 cookies（如 withCredentials: true），服务端 Access-Control-Allow-Origin 不能设置为 ，必须明确指定源；
• 对于复杂请求（如 PUT、DELETE 或携带自定义头的请求），浏览器会先发送一个 OPTIONS 预检请求（Preflight Request）,服务端需正确响应预检请求。

JSONP（仅支持 GET 请求）

JSONP（JSON with Padding）是一种早期的跨域解决方案，通过动态创建 <script> 标签，利用 <script> 标签的跨域能力获取数据，其核心原理是服务端返回一段可执行的 JavaScript 代码,前端通过回调函数处理返回的数据。

AngularJS 中的 JSONP 实现：
AngularJS 的 $http 服务内置了对 JSONP 的支持，只需在请求 URL 中添加 callback 参数，并使用 JSONP 回调方式。

示例代码：

angular.module('myApp', [])
  .controller('MainController', function($scope, $http) {
    $http.jsonp('http://api.example.com/data?callback=JSON_CALLBACK')
      .success(function(data) {
        $scope.data = data;
      })
      .error(function(error) {
        console.error('JSONP 请求失败:', error);
      });
  });

注意事项：

• JSONP 仅支持 GET 请求，无法用于 POST、PUT 等方法；
• 服务端需配合返回 callback 函数调用的代码（如 JSON_CALLBACK({ message: '成功' })）；
• JSONP 存在安全风险（如 XSS 攻击）,需确保数据源可信。

代理服务器方案

当前端无法直接修改服务端配置时，可通过代理服务器转发请求，将跨域请求转化为同源请求，AngularJS 项目中，可通过 ngrok（本地开发代理）、Nginx（反向代理）或 Webpack 代理实现。

示例（Nginx 反向代理）：
配置 nginx.conf，将前端的 API 请求代理到后端服务：

server {
  listen 8080;
  server_name localhost;
  location /api/ {
    proxy_pass http://api.example.com:3000/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
}

此时前端请求 http://localhost:8080/api/data，实际会被 Nginx 转发到 http://api.example.com:3000/data,避免了跨域问题。

示例（Webpack 代理）：
在 angular-cli.json 或 webpack.config.js 中配置代理：

proxy: {
  '/api': {
    target: 'http://api.example.com:3000',
    secure: false,
    changeOrigin: true
  }
}

AngularJS 跨域请求配置细节

在使用 $http 服务时，可通过配置对象调整请求参数，以适应不同的跨域场景：

跨域问题的常见问题与排查

1. 预检请求失败
   复杂请求时，若服务端未正确响应 OPTIONS 请求，会导致跨域失败，需检查服务端是否配置了 Access-Control-Allow-Methods 和 Access-Control-Allow-Headers。

2. 携带 cookies 失败
   若前端设置了 withCredentials: true，服务端必须明确指定 Access-Control-Allow-Origin（不能为 ），且 Access-Control-Allow-Credentials 为 true。

3. JSONP 回调错误
   确保 URL 中的 callback 参数值为 JSON_CALLBACK（AngularJS 内置）,且服务端返回的回调函数名与请求一致。

AngularJS 中的跨域问题可通过多种方式解决，其中服务端 CORS 配置是推荐的首选方案，兼顾安全性与兼容性；JSONP 适用于仅支持 GET 请求的场景；代理服务器则在前端无法修改服务端时提供灵活的替代方案，开发者需根据项目需求和技术栈选择合适的方案，并注意配置细节以避免常见错误，通过合理处理跨域请求，可确保 AngularJS 应用与后端 API 的顺畅交互,提升用户体验。