什么是 CORS？
CORS，即跨源资源共享（Cross-origin Resource Sharing）。当一个网站向另外一个网站发送请求时，浏览器会出于安全考虑保护用户数据，拒绝跨域请求。CORS 机制允许一个网站开放访问授权，使得其他网站的客户端能够以安全的方式与它进行交互。
CORS 如何影响前端应用？
在前端应用中，如果向不同域的 API 发送 HTTP 请求，由于浏览器的同源策略（Same Origin Policy），请求将会被浏览器拒绝，导致请求失败。
考虑到大多数前端应用都需要与远程 API 进行交互，CORS 就成为了一项重要的技术挑战。本文将提供一些可行的解决方案。
解决方案
服务器端跨域访问
最常见的解决方案是在服务器端进行跨域访问。在服务器端创建一个跨域访问的代理，然后将客户端的请求路由到代理服务器。该方法需要服务器端进行配置，但客户端代码的改动会比较小。
可以借助 Express.js 搭建一个简单的代理服务器。以下是示例代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ------- - ------------------- ----- --- - ---------- ----- ---- - ----- ---------------------------------- --------------- ----- ---- -- - ----- --- - -------------------- - -------- --------------------------------- --- ---------------- -- -- - -------------------- --- --------- -- --------------------------- ---
在上述示例中，我们通过 Express.js 搭建了一个代理服务器，将 /api 路由的请求路由到 http://example.com 域名下。客户端访问 /api，代理服务器会将请求通过 request() 方法转发到目标域名的服务端，并将请求的结果返回给客户端。
JSONP
JSONP 应该算是历史上最流行的跨域请求解决方案。它利用了 HTML <script> 标签可以跨域加载资源的特性，实现跨域请求。
在实践中，使用 JSONP 发起跨域请求时，需要在服务器端返回一个包含客户端函数名的 JSON 对象，客户端需要在回调函数中处理服务器返回的数据。
以下是一个使用 JSONP 请求 Flickr API 的示例代码：
-- -------------------- ---- -------
-------- --------------- --------- -
----- --- - --------------------------------------------------------------------------------------------------------------------------------------
--------------------- - -------------- -
---------------------
--
----- ------ - ---------------------------------
---------- - ----
----------------------------------
-在上述代码中，我们定义一个 search 函数，用于向 Flickr API 发送请求。在请求中，我们利用了 JSONP 的特性，请求的 URL 中包含了客户端函数的名称 jsonFlickrFeed。在客户端执行结果函数中，我们将结果数据传递给回调函数。
设置请求头
在以上解决方案不可行时，我们可以在客户端设置请求头以绕过 CORS。使用 XMLHttpRequest 对象发送请求时，我们可以通过设置 Access-Control-Allow-Origin 头来实现跨域请求。
以下是一个使用 XMLHttpRequest 请求 Flickr API 的示例代码：
-- -------------------- ---- -------
-------- --------------- --------- -
----- --- - --- -----------------
--------------- -----------------------------------------------------------------------------------------------------------
--------------------------------------------------- -----
---------------------- - -- -- -
-- --------------- --- - -- ---------- --- ---- -
----- ---- - ---------------------------------------------------------------
---------------
-
--
-----------
-在上述示例中，我们使用 XMLHttpRequest 对象发送 GET 请求，并在请求头中设置 Access-Control-Allow-Origin 头为 *。在回调函数中，我们将响应文本解析为 JSON 对象，并将结果数据传递给回调函数。
总结
本文介绍了通过服务器端跨域访问、JSONP 和设置请求头三种方式解决 Angular 应用中访问 API 出现的 CORS 跨域问题。在实践中，应该优先考虑第一种解决方案，因为它不需要对客户端代码进行改动。但在其他地方，例如需要和第三方 API 进行交互时，我们可以使用其他两种解决方案。
希望本文对读者在实际开发中遇到的 CORS 跨域问题有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651d2d6d95b1f8cacd4b1c6e