什么是 CORS？
CORS（跨域资源共享）是一种用于让在客户端使用 XMLHttpRequest 或 Fetch API 的 Web 应用程序可以与跨域服务器共享资源的机制。它是一种安全机制，可以防止跨站点的攻击。
为什么要使用 CORS？
在一个 Web 应用程序中，客户端通常需要请求服务器上的资源。而如果这些资源存储在不同的域名下，就会遇到 CORS 问题。因为浏览器会在发送请求的时候执行限制检查，防止跨站点的攻击。如果检查失败，浏览器就会阻止客户端访问服务器上的资源。
相应地，CORS 所解决的问题就是如何让客户端跨域请求服务器上的资源。在 Angular 中，可以通过 HttpClient 来实现。
如何利用 HttpClient 实现 CORS？
在 Angular 中，可以使用 HttpClient 发送请求，然后通过添加 CORS 头来解决跨域问题。以下是一些核心要点：
- 添加 header。需要在 HttpClient 的配置中添加 header，来使请求符合跨域请求的要求。header 中需要包含 origin、content-type、access-control-request-method 和 access-control-request-headers 等信息。
- 检查响应。服务器在接受到请求后，会返回响应信息。在得到响应后，需要检查其中是否包含 access-control-allow-origin 字段。这个字段指示是否接受来自不同域名的请求。
以下是一个示例代码：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---------- - ---- -----------------------
------------
--------- ---------------------
------------ ----------------------------------
---------- ----------------------------------
--
------ ----- ------------- ---------- ------ -
-------- ------ - ---------------------
------------------- ----- ----------- - -
---------- -
-
------------ ---- -
------------------ ------
----- --- - ----------------------
------------------ --------- -------------------------
-------------- -- ------------------
-
------- ------------------ -
--- ------- - -
--------------- -------------------
------------------------------ ----
------------------------------- ----- ----- ------ ---- ------- ---------
------------------------------- -------- ------------- -------------
--
------ --------
-
-要注意的点
- 如果使用了自定义的 header，需要在服务器上进行相应的设置，否则会返回 null。
- 服务器需要正确配置 CORS，包括设置 access-control-allow-origin、access-control-expose-headers 和 access-control-allow-methods 等字段。
总结：在使用 Angular 发送跨域请求时，需要使用 HttpClient，并在请求头中添加必要的信息。这是一种实现跨域访问服务器资源的方式。通过正确地使用跨域技术，可以使 Web 应用程序更加安全、高效、可扩展。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a29ff648841e9894f124cb
