在前端开发中，我们经常需要通过 $http 请求接口获取数据。但是，由于浏览器的同源策略，如果请求的接口与当前页面的域名不一致，就会出现跨域问题。这在 Angular 中也是一个常见的问题。本文将介绍 Angular 中使用 $http 请求接口时的跨域问题解决方法，并提供详细的示例代码。
什么是跨域问题？
同源策略是浏览器对 Web 安全性的一种基本限制。同源指的是域名、协议、端口号都相同，只有这三个要素完全相同，才能算是同源。同源策略的目的是保护用户的信息安全，防止恶意网站窃取用户的信息。
跨域问题指的是在一个域名下访问另一个域名的资源时，由于同源策略的限制，浏览器会拒绝请求。例如，当前页面的域名为 http://localhost:8080，想要请求 http://api.example.com 的接口，就会出现跨域问题。
Angular 中的跨域问题
在 Angular 中，我们通常使用 $http 服务来发送请求。如果请求的接口与当前页面的域名不一致，就会出现跨域问题。例如，如果我们使用以下代码发送请求：
$http.get('http://api.example.com/users')
.then(function(response) {
console.log(response.data);
});当我们在 http://localhost:8080 的页面上运行这段代码时，就会出现跨域问题，因为请求的接口与当前页面的域名不一致。
解决跨域问题的方法
为了解决跨域问题，我们需要在服务端进行一些配置。以下是几种常见的解决跨域问题的方法。
1. JSONP
JSONP 是一种利用 script 标签进行跨域请求的技术。它的原理是通过在前端页面中创建一个 script 标签，将请求的数据包装在一个函数中返回，然后前端页面通过回调函数来获取返回的数据。
在 Angular 中，我们可以使用 $http.jsonp 方法发送 JSONP 请求。例如：
$http.jsonp('http://api.example.com/users?callback=JSON_CALLBACK')
.then(function(response) {
console.log(response.data);
});其中，callback 参数指定回调函数的名称，Angular 会自动将 JSON_CALLBACK 替换成一个随机生成的函数名。
在服务端，我们需要将返回的数据包装在一个函数中。例如，在 Node.js 中可以这样写：
app.get('/users', function(req, res) {
var data = { name: 'Alice', age: 18 };
var callback = req.query.callback;
res.send(callback + '(' + JSON.stringify(data) + ')');
});2. CORS
CORS（Cross-Origin Resource Sharing）是一种浏览器跨域解决方案。它的原理是在服务端设置一些响应头，告诉浏览器当前域名下的页面可以访问该接口。
在 Angular 中，我们可以通过设置 $httpProvider.defaults.useXDomain = true 和 $httpProvider.defaults.withCredentials = true 来启用 CORS 支持。例如：
$httpProvider.defaults.useXDomain = true;
$httpProvider.defaults.withCredentials = true;
$http.get('http://api.example.com/users')
.then(function(response) {
console.log(response.data);
});在服务端，我们需要设置响应头，允许指定域名下的页面访问该接口。例如，在 Node.js 中可以这样写：
app.get('/users', function(req, res) {
res.header('Access-Control-Allow-Origin', 'http://localhost:8080');
res.send({ name: 'Alice', age: 18 });
});3. 代理
代理是一种比较常见的跨域解决方案。它的原理是在本地建立一个代理服务器，将请求发送到代理服务器上，然后代理服务器再将请求转发到目标服务器上，最后将响应返回给前端页面。
在 Angular 中，我们可以通过设置 $httpProvider.defaults.proxyUrl 来启用代理支持。例如：
$httpProvider.defaults.proxyUrl = 'http://localhost:3000/proxy?url=';
$http.get('http://api.example.com/users')
.then(function(response) {
console.log(response.data);
});在服务端，我们需要建立一个代理服务器，将请求转发到目标服务器上。例如，在 Node.js 中可以这样写：
app.get('/proxy', function(req, res) {
var url = req.query.url;
request(url).pipe(res);
});示例代码
以下是一个完整的示例代码，展示了如何使用 JSONP、CORS 和代理来解决跨域问题。
-- -------------------- ---- -------
--------------------- ---
------------------------------- -
-- -- ----- --
----------------------------------------- - -----------
-- -- ---- --
--------------------------------- - -----
-------------------------------------- - -----
-- ------
------------------------------- - -----------------------------------
--
----------------------------- ---------------- ------ -
-- ----- --
------------------------------------------------------------------
------------------------ -
---------------- - --------------
---
-- ---- --
-----------------------------------------
------------------------ -
--------------- - --------------
---
-- ----
----------------------------------------------------
------------------------ -
---------------- - --------------
---
---总结
跨域问题是前端开发中常见的问题之一。在 Angular 中，我们可以使用 JSONP、CORS 和代理等方法来解决跨域问题。在实际开发中，我们需要根据具体情况选择合适的方法来解决跨域问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66252346f76562e4b38f5b4d