上一篇
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 服务时，可通过配置对象调整请求参数，以适应不同的跨域场景：
| 配置项 | 说明 | 示例 |
|---|---|---|
| withCredentials | 是否携带 cookies（需服务端支持 Access-Control-Allow-Credentials） | $http.get('/api/data', { withCredentials: true }) |
| headers | 自定义请求头（需服务端允许 Access-Control-Allow-Headers） | $http.post('/api/data', data, { headers: { 'Content-Type': 'application/json' } }) |
| transformRequest | 请求数据转换（如序列化 JSON） | $http.post('/api/data', data, { transformRequest: angular.identity }) |
跨域问题的常见问题与排查
-
预检请求失败
复杂请求时，若服务端未正确响应 OPTIONS 请求，会导致跨域失败，需检查服务端是否配置了 Access-Control-Allow-Methods 和 Access-Control-Allow-Headers。
-
携带 cookies 失败
若前端设置了 withCredentials: true，服务端必须明确指定 Access-Control-Allow-Origin（不能为 ），且 Access-Control-Allow-Credentials 为 true。
-
JSONP 回调错误
确保 URL 中的 callback 参数值为 JSON_CALLBACK（AngularJS 内置）,且服务端返回的回调函数名与请求一致。
AngularJS 中的跨域问题可通过多种方式解决，其中服务端 CORS 配置是推荐的首选方案，兼顾安全性与兼容性；JSONP 适用于仅支持 GET 请求的场景；代理服务器则在前端无法修改服务端时提供灵活的替代方案，开发者需根据项目需求和技术栈选择合适的方案，并注意配置细节以避免常见错误，通过合理处理跨域请求，可确保 AngularJS 应用与后端 API 的顺畅交互,提升用户体验。
