随着单页应用（SPA）在前端领域的流行，跨域问题也愈发常见。本文将介绍 Fetch API 并借助此 API 来解决 SPA 跨域请求问题。
Fetch API 简介
Fetch API 是由 WHATWG（Web Hypertext Application Technology Working Group）规定并由浏览器实现的 Web API，用于代替 XMLHttpRequest（XHR）发送网络请求。Fetch API 提供了更加简单和强大的方式来处理网络请求。
Fetch API 的基本使用方式如下：
-- -------------------- ---- -------
----------
-------------- -- -
------ ----------------
--
---------- -- -
------------------
--
------------ -- -
---------------------
---上述代码中，fetch 函数发送一个 GET 请求，并返回一个 Promise 对象。在 then 回调函数中，我们可以使用 response.json() 方法来将响应内容解析为 JSON 格式的数据。最后在 catch 回调函数中，我们可以处理请求异常情况。
跨域问题
同源策略是浏览器的一个安全策略，它限制了一个页面中的脚本仅能与来自同一来源的资源进行交互。不同源之间的资源请求通常会被浏览器阻止，除非响应头设置了 CORS 跨域资源共享。
由于单页应用使用 JavaScript 动态生成 HTML，因此它属于跨域资源请求的一种典型场景。在 SPA 跨域请求时，由于浏览器的同源策略，我们需要设置响应头的如下几个字段：
- Access-Control-Allow-Origin - 允许访问的源
- Access-Control-Allow-Methods - 允许使用的请求方法
- Access-Control-Allow-Headers - 允许使用的头部信息
- Access-Control-Allow-Credentials - 是否允许发送 Cookie 等用户凭证信息
使用 Fetch API 显式请求 CORS
在 Fetch API 中，我们通过设置一个 Request 对象作为第一个参数来显式地创建一个跨域请求。
-- -------------------- ---- -------
----- --- - ------------------------------------
----- ------- - -
-------- -
------------------------------ ----
------------------------------- ------
------------------------------- ---
-
--
--------- ------------ ---------
-------------- -- -
------ ----------------
--
---------- -- -
------------------
--
------------ -- -
---------------------
---可以看到，我们在 options 中添加了 Access-Control-Allow-Origin、Access-Control-Allow-Methods 和 Access-Control-Allow-Headers 等跨域请求头字段。通过显式创建 Request 对象并传入 options 可以让 Fetch API 发送跨域请求。
使用 CORS 代理请求
除了显式设置跨域请求头，我们还可以使用 CORS 代理的方式通过后端服务器转发请求。
以下代码示例使用 Node.js 中间件 http-proxy-middleware 进行反向代理。
-- -------------------- ---- -------
----- ------- - -------------------
----- - --------------------- - - ---------------------------------
----- --- - ----------
-- ------
--------
-------
-----------------------
------- --------------------------
------------- -----
------------ -
-------- ---
--
-------- -
------------------------------ ----
------------------------------- ----------------------
------------------------------- ----------------------------
-
--
--
---------------- ---------- -
------------------- -- ------- -- ---- -------
---上述代码中，我们使用 http-proxy-middleware 中间件反向代理 /api 路径，将跨域请求转发到 https://api.example.com 地址。并且我们在响应头中添加了 Access-Control-Allow-Origin、Access-Control-Allow-Methods 和 Access-Control-Allow-Headers 等字段，以处理跨域请求。
最后，我们可以在前端代码中使用 Fetch API 访问该代理服务器：
-- -------------------- ---- -------
--------------------------------------------
-------------- -- -
------ ----------------
--
---------- -- -
------------------
--
------------ -- -
---------------------
---总结
在本文中，我们介绍了 Fetch API 并使用它显式请求 CORS 和使用 CORS 代理的方式解决 SPA 跨域问题。希望本文中的内容对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fc4763f6b2d6eab321a5c1