什么是跨域问题
在网页中，如果一个页面的 JavaScript 代码想要访问另外一个页面的数据，那么需要浏览器支持跨域访问。所谓跨域，就是指在网络安全限制下，一个网站的文件无法直接访问另外一个网站的文件。
Angular的跨域问题
在Angular应用程序中访问远程数据时，由于浏览器的"同源策略"限制，可能会导致跨域问题。这即是说，Angular无法从不同源（协议、域名或端口）接收HTTP响应。
解决方法
1. 使用反向代理
在应用程序中通过配置反向代理，将远程服务器的API代理到应用程序的本地服务器上，从而规避了浏览器同源策略的限制。
假如我们有一个远程服务器地址 https://example.com/api ，我们可以将其反向代理到我们的本地服务器，比如 localhost:3000 ，以避免跨域问题。
我们可以使用 http-proxy-middleware 这个NPM包来完成反向代理的配置。首先安装：
npm install http-proxy-middleware
然后在app.module.ts文件中加入以下代码：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ----------------- ----------------- - ---- ----------------------- ------ - ------------- - ---- ---------------------------- ------ - ---------------- - ---- ----------------------- ------ - ------------ - ---- ------------------ ------ - ------------ - ---- ----------------------------- ------ - ----------- - ---- ------------------------------- ----------- ------------- - ------------ -- -------- - -------------- ----------------- ---------------- -- ---------- - - -------- ------------------ --------- --------------- ------ ---- - -- ---------- -------------- -- ------ ----- --------- - -展开代码
其中 reverse-proxy-middleware.ts 文件中，我们可以自定义一些规则，用来做反向代理：
-- -------------------- ---- ------- ------ - ------- - ---- ------- ------ - --------------------- - ---- ------------------------ ------ -------- -------------- - ------ ------------------------------ ------------ - ------- ------------------- ------------- ----- ------------ - -------- --- ------------ --------- - --- -展开代码
至此，我们已成功解决了Angular应用程序中的跨域问题。
2. CORS
另外一种解决跨域问题的方式是通过CORS（跨源资源共享）。
要启用CORS，后端API必须发送一些相应的标头，以便浏览器允许跨源请求。
在Angular应用程序中，我们需要添加withCredentials属性，以便将我们的cookie一起发送给API，以确保登录状态被保持。下面是一些示例代码：
-- -------------------- ---- ------- ------ - ---------- - ---- ---------------- ------ - ----------- ------------ ---------- - ---- ----------------------- ------ - --- - ---- ----------------- ------ - ---------- - ---- ------- ------ - ----------- - ---- --------------------------------- ------------- ----------- ------ -- ------ ----- ---------- - ------------------- ----- ----------- - - -------- ------- ------- ---------- - --- ------------- -------- --- - ---- --------------- - -------------------------- - ----- ------ -------------------------------------------- ------------ -------------- ------- -- - ------ ---- -- -- - --------- ------- ----- ------ - --- -------- --- - ---- --------------- - -------------------------- - ----- ------ --------------- ------------------------------ --------------------- - ----------- -------- --- ------------- --------------- ------------------ -- - -- - -展开代码
在对API进行调用的时候，我们可以发现在每个请求的设置中都添加了withCredentials属性。这个属性可以确保我们的cookie得以延续。
总结
无论我们使用的是反向代理还是CORS，解决跨域问题都是非常必要的。当我们需要从另一个源获取数据时，这些问题会持续出现。使用CORS相对于反向代理，更加轻量且易于设置，因此它是更流行的方式。
不管怎样，此处提供的两种方法都可以让我们的Angular应用程序在浏览器中成功接收到从其他解决方案提供的数据。
参考链接
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653498a37d4982a6eb96f7ae
