跨域问题是前端开发中常见的一个问题，尤其是在使用 Angular 进行开发时。本文将介绍 Angular 中遇到的跨域问题以及解决方案。
什么是跨域问题
跨域问题是指在同一“源”（协议、主机名、端口号）下进行的通信，比如在 http://localhost:4200 网站下，Ajax 请求一个 http://localhost:8080 网站下的资源时，就会发生跨域。同源策略是为了保护用户隐私和安全而设置的，不同源之间的 JavaScript 无法相互访问对方的资源，比如 Cookie、LocalStorage、IndexedDB 等。
在 Angular 中遇到的跨域问题
在 Angular 中，当使用 HttpClient 发送 Http 请求时，如果请求地址和应用的域名不同，就会出现跨域问题。比如下面这个例子：
-- -------------------- ---- -------
------ - ---------- - ---- -----------------------
------ ----- --------- -
------------------- ----- ----------- --
--------- -
------ --------------------------------------------
-
-上面的代码中，getData() 方法会向 http://localhost:8080/data 发送一个请求，如果与应用的域名不同，就会产生跨域问题。
解决跨域问题
使用 JSONP
JSONP 是解决跨域问题的一种方法，它的原理是通过 <script> 标签的 src 属性，向另一个域名下的服务器发送请求，获取数据后在本地执行回调函数。JSONP 的缺点是只能用于 GET 请求，而且无法像 AJAX 那样检测网络错误。
在 Angular 中，可以通过 HttpJsonpModule 模块使用 JSONP。下面是一个示例：
-- -------------------- ---- -------
------ - ----------- ----------- --------------- - ---- -----------------------
------ ----- --------- -
------------------- ----- ----------- --
----------------- --------- -
--- ------ - --- ---------------------------- ------------------
--------------------------------------------- ----------------------
---- -- -
---------------
--
--- -- -
-------------------
-
--
-
-上面的代码中，getData() 方法接受一个回调函数作为参数，在获取数据后通过回调函数将数据传递给调用方。
使用代理服务器
使用代理服务器是解决跨域问题的一种常见方法，它的原理是在应用和远程服务器之间添加一个代理服务器，将应用的请求通过代理服务器转发到远程服务器，从而避免跨域问题。
在 Angular 中，可以使用 Angular CLI 的 proxy-config 选项配置代理服务器。下面是一个示例：
- 在应用根目录下创建
proxy-config.json文件，添加以下内容：
{
"/api": {
"target": "http://localhost:8080",
"secure": false
}
}上面的配置表示将 http://localhost:4200/api 的请求转发到 http://localhost:8080。
- 在
angular.json中添加proxy-config选项：
-- -------------------- ---- -------
-
----------- -
--------- -
------------ -
-------- -
---------- -
-------------- -------------------
-
-
-
-
-
-上面的配置表示在运行 ng serve 命令时，将使用 proxy-config.json 配置文件作为代理服务器。
- 在服务中使用代理服务器：
-- -------------------- ---- -------
------ - ---------- - ---- -----------------------
------ ----- --------- -
------------------- ----- ----------- --
--------- -
------ ---------------------------
-
-上面的代码中，getData() 方法向 /api/data 发送请求，由于在 proxy-config.json 中配置了代理服务器，所以实际的请求将由代理服务器转发到 http://localhost:8080/data。
总结
在 Angular 中，跨域问题通常可以使用 JSONP 或代理服务器解决。JSONP 只能用于 GET 请求，而代理服务器可以用在任何类型的请求上。选择哪种方法，取决于具体的需求。如果只是获取数据，可以使用 JSONP；如果需要与远程服务器进行交互，建议使用代理服务器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/664d4c4dd3423812e4c8c6c5