在前端开发中，经常需要从服务器端获取数据或者调用 API。然而，由于浏览器的同源策略，通过 JavaScript 直接访问不同域名下的资源是被禁止的，这就导致了跨域请求的问题。本文将介绍如何使用 ECMAScript 2021 的 fetch API 来解决跨域请求的问题，并提供详细的示例代码和指导意义。
什么是跨域请求
跨域请求指的是在浏览器中，通过 JavaScript 访问另一个域名下的资源。如果今天我们在 http://example.com 的页面中使用 JavaScript 向 http://example.org 发送请求，就会触发跨域请求。由于浏览器的同源策略，这个请求将被阻止，并且 JavaScript 的异常处理机制会抛出一个错误，从而导致程序无法正常执行。
如何使用 fetch API 发起跨域请求
fetch API 是一种在浏览器中发送请求的新方式，并且支持异步请求和 Promise 对象，因此在前端开发中越来越受欢迎。下面是使用 fetch API 发起跨域请求的基本示例：
fetch('http://example.org/data.json')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));上述代码中，首先使用 fetch 函数指定要请求的资源。fetch 函数的第一个参数是要请求的 URL 地址。需要注意的是，由于这是一个跨域请求，因此在服务器端必须设置 CORS 策略，允许使用跨域请求，否则会出现 403 错误。
fetch 函数返回的是一个 Promise 对象，我们可以通过使用 Promise 的 then 方法来处理服务器返回的数据。在本例中，我们使用 response.json() 方法将返回的 JSON 数据解析为 JavaScript 对象，并在控制台输出。
如果请求出现错误，可以使用 Promise 的 catch 方法来处理错误，这里我们只是简单地将错误输出到控制台上。
如何在请求中添加请求头
在 fetch API 中，可以使用 Headers 对象来创建自定义请求头。下面是添加请求头的示例：
const headers = new Headers();
headers.append('Content-Type', 'application/json');
fetch('http://example.org/data.json', {
method: 'POST',
headers: headers,
body: JSON.stringify({name: 'Tom'}),
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));上述代码中，我们首先创建一个名为 headers 的 Headers 对象，然后使用 append 方法添加一个 Content-Type 请求头，该请求头指定了请求体的数据格式为 JSON。
在使用 fetch 函数发送请求时，我们将修改请求参数，使用 POST 方法发送一个包含 JSON 数据的请求体。在请求中，我们使用 headers 参数来指定请求头，将上述 headers 对象传递给 headers 参数即可。
如何在请求中使用 Cookie
由于浏览器的同源策略，Cookie 只能在相同域名下传输，因此默认情况下 fetch API 不会将 Cookie 发送到其他域名下。如果需要在跨域请求中使用 Cookie，可以使用 credentials 参数来完成设置。下面是示例代码：
fetch('http://example.org/data.json', {
credentials: 'include',
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));上述代码中，我们将 credentials 参数设置为 include，这样就可以在跨域请求中使用 Cookie 了。
如何取消 fetch 请求
在使用 fetch API 发送请求时，有时需要在请求未完成时取消请求。fetch API 提供了 AbortController 对象来取消请求。下面是取消请求的示例代码：
const controller = new AbortController();
fetch('http://example.org/data.json', {
signal: controller.signal,
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
controller.abort();上述代码中，我们首先创建了一个 AbortController 对象，然后将其 signal 属性传递给 fetch 函数。在请求需要取消时，我们调用 AbortController 对象的 abort 方法即可。
总结
本文介绍了如何使用 ECMAScript 2021 的 fetch API 来处理跨域请求的问题。我们提供了详细的示例代码和指导意义，以帮助开发人员更好地理解如何在前端项目中使用 fetch API 发送异步请求。如果你还不熟悉 fetch API，希望本文能够为你提供一些帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a7a619add4f0e0ff0cb8c2