什么是 CORS
CORS (Cross-Origin Resource Sharing) 是一种机制，它允许 Web 页面向不同源的服务器发起 XMLHttpRequest 请求。在默认情况下，浏览器是不允许跨域请求的。因为跨域请求可以导致一些安全问题，例如 CSRF（跨站点请求伪造）攻击。
为什么会出现 CORS 错误问题
如果前端应用程序向不同源的服务器发起 XMLHttpRequest 请求，就会出现 CORS 错误问题。例如，假设你的 Angular 应用程序部署在 http://localhost:4200 上，但你向 http://example.com 发起请求，那么浏览器就会拦截该请求，并提示错误信息。
如何解决 CORS 错误问题
Angular 的 HttpClient 给我们提供了解决 CORS 错误问题的方法。我们只需要在请求头中添加一些特定的参数，就可以允许跨域请求。
以下是示例代码：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ----------- ----------- - ---- -----------------------
------ - ---------- - ---- -------
-------------
----------- ------
--
------ ----- ----------- -
------- ------ - -------------------------
------------------- ----- ----------- - -
---------- --------------- -
--- ------- - --- -------------
--------------- -------------------
------------------------------ ----
------------------------------- ----- ----- ---------
------------------------------- -------- ----------------- ------------- --------
---
--- ------- - - -------- ------- --
------ -------------------------- ---------
-
-在这个示例代码中，我们向 http://example.com/api 发起 GET 请求。在请求头中添加了以下参数：
- 'Content-Type': 'application/json'，指示请求的内容类型为 JSON。
- 'Access-Control-Allow-Origin': '*'，指示服务器允许来自所有域的请求。
- 'Access-Control-Allow-Methods': 'GET, POST, OPTIONS'，指示服务器允许 GET、POST 和 OPTIONS 方法。
- 'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'，指示服务器允许 Origin、X-Requested-With、Content-Type 和 Accept 头。
总结
在 Angular 中使用 HttpClient 发起请求时，我们需要注意跨域请求可能导致的 CORS 错误问题。为了解决这个问题，我们可以使用 HttpClient 的 HttpHeaders，在请求头中添加一些特定的参数。这些参数能够告诉服务器，我们允许跨域请求。通过这种方式，我们可以在 Angular 应用程序中发起跨域请求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648d257e48841e9894b71ec2