angularjs调接口时如何解决跨域和请求参数传递问题？

AngularJS 作为一款经典的前端框架，凭借其双向数据绑定、依赖载入等特性，在 Web 开发领域曾占据重要地位，与后端接口进行数据交互是前端开发的核心环节，本文将详细介绍 AngularJS 调用接口的相关知识，包括核心服务、常用方法、参数传递、错误处理及最佳实践等内容。

核心服务：$http 与 $resource

AngularJS 提供了内置的 $http 服务和 $resource 服务用于与后端 API 进行通信，两者各有侧重，适用于不同的场景。

$http 服务

$http 是 AngularJS 最核心的 HTTP 请求服务，基于浏览器的 XMLHttpRequest 或 JSONP 实现，支持 GET、POST、PUT、DELETE、HEAD 等多种 HTTP 方法，其基本使用语法为：

$http(config).then(successCallback, errorCallback);

config 是一个配置对象，可包含 url（请求地址）、method（请求方法）、params（GET 请求参数）、data（POST/PUT 请求体数据）、headers（请求头）等属性，successCallback 和 errorCallback 分别是请求成功和失败时的回调函数，返回 Promise 对象，支持链式调用。

$resource 服务

$resource 是 AngularJS 官方提供的 ngResource 模块中的服务，专门用于 RESTful 风格的接口调用，它基于 $http 封装，提供了更简洁的 API，适合标准的 CRUD（增删改查）操作，使用前需引入 angular-resource.js 文件：

$resource 的第一个参数是资源 URL 模板，第二个参数是默认参数，第三个参数可自定义扩展方法。

接口调用方法详解

GET 请求：获取数据

GET 请求用于从服务器获取资源，参数通常通过 URL 查询字符串传递。

$http.get('/api/users', { params: { page: 1, limit: 10 }, headers: { 'Authorization': 'Bearer token' } }).then(function(response) { $scope.users = response.data; }, function(error) { console.error('Error fetching users:', error); });

POST 请求：提交数据

POST 请求用于向服务器提交资源，数据通常放在请求体中。

PUT/PATCH 请求：更新数据

PUT 通常用于完整更新资源，PATCH 用于部分更新，数据同样放在请求体中。

// PUT 请求 $http.put('/api/users/1', { name: 'Alice Smith', email: 'alice.smith@example.com' }).then(function(response) { $scope.updatedUser = response.data; }); // PATCH 请求 $http.patch('/api/users/1', { email: 'new.email@example.com' });

DELETE 请求：删除数据

DELETE 请求用于删除服务器上的资源，通常需指定资源 ID。

$http.delete('/api/users/1').then(function(response) { console.log('User deleted successfully'); });

参数传递与响应处理

参数传递方式

• 查询参数：GET 请求的参数通过 params 属性传递，或直接拼接到 URL 中。
• 路径参数：RESTful 接口中的动态参数（如 id）需在 URL 模板中定义，通过 $resource 的第二个参数绑定。
• 请求体参数：POST/PUT/PATCH 请求的数据通过 data 属性传递，默认 Content-Type 为 application/json。

响应数据结构

$http 的响应对象包含多个属性：

• data：服务器返回的数据主体。
• status：HTTP 状态码（如 200、404、500）。
• headers：响应头信息。
• config：原始请求配置对象。
• statusText：HTTP 状态文本（如 ‘OK’、’Not Found’）。

通过 response.data 可直接获取业务数据，response.status 用于判断请求状态。

错误处理与拦截器

全局错误处理

使用 $http 的 catch 方法或第二个回调函数可捕获请求错误：

$http.get('/api/data').catch(function(error) { if (error.status === 404) { console.error('Resource not found'); } else if (error.status === 500) { console.error('Server error'); } return $q.reject(error); // 继续传递错误 });

拦截器（Interceptor）

拦截器是 $http 的强大功能，可在请求发送前、响应返回后进行统一处理，如添加 token、统一错误处理、日志记录等，拦截器需实现 request、requestError、response、responseError 四个方法：

app.config(function($httpProvider) { $httpProvider.interceptors.push('authInterceptor'); }); app.factory('authInterceptor', function($q, $localStorage) { return { request: function(config) { if ($localStorage.token) { config.headers.Authorization = 'Bearer ' + $localStorage.token; } return config; }, responseError: function(rejection) { if (rejection.status === 401) { // 处理未授权逻辑 } return $q.reject(rejection); } }; });

常见问题与最佳实践

跨域问题

后端需配置 CORS（跨域资源共享），在响应头中添加：

Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET, POST, PUT, DELETE Access-Control-Allow-Headers: Content-Type, Authorization

数据格式约定

前后端应统一数据格式,如 RESTful 接口返回 JSON 数据，包含 code、message、data 等字段，便于前端统一处理。

缓存控制

GET 请求默认会被浏览器缓存，可通过 cache: false 禁用缓存，或添加时间戳参数防止缓存：

$http.get('/api/data', { cache: false });

安全性

• 敏感数据（如 token）应通过 HTTP 头传递，避免放在 URL 或请求体中。
• 对用户输入进行转义,防止 XSS 攻破。
• 使用 HTTPS 加密传输数据。

性能优化

• 避免频繁请求,可使用防抖（debounce）或节流（throttle）技术。
• 合理使用 $resource 的缓存机制，减少重复请求。
• 大数据列表可采用分页加载,降低服务器压力。

AngularJS 的接口调用能力是构建动态 Web 应用的基础，通过 $http 和 $resource 服务，开发者可以灵活地与后端进行数据交互，在实际开发中，需根据业务场景选择合适的服务，注重错误处理、安全性和性能优化，并结合拦截器实现统一的请求管理，掌握这些核心知识点，能够帮助开发者更高效地完成 AngularJS 项目的接口对接工作，确保应用的稳定性和可维护性。