Fetch API的跨域请求处理

# 1. 理解Fetch API

## 1.1 什么是Fetch API？

Fetch API 是一种新的网络请求接口，用于替代传统的 XMLHttpRequest 对象，提供了更强大和灵活的功能。

## 1.2 Fetch API的优势和特点

- 支持 Promise 对象，更方便处理异步请求；
- 提供更简洁的接口，易于使用和理解；
- 支持流式处理数据，可用于处理大文件；
- 提供更好的错误处理机制。

## 1.3 Fetch API与传统Ajax的区别

- Fetch API 使用 Promise 处理异步请求，而传统的 Ajax 使用回调函数；
- Fetch API 使用更现代的流式数据处理方式；
- Fetch API 提供更灵活的请求和响应对象处理方式。

# 2. 跨域请求的原因与问题

跨域请求是指在Web开发中，当一个源（origin）的JavaScript代码向不同源的服务器发起HTTP请求时，浏览器会采取一些安全限制措施，这是因为同源策略的限制。跨域请求可能引发一系列问题和挑战，需要开发者了解其原因和解决方法。

### 2.1 为什么跨域请求会存在安全性限制？

在Web开发中，跨域请求存在安全性限制的原因主要是为了防止恶意的跨站脚本（XSS）攻击和数据窃取行为。同源策略可以有效防止一个站点的恶意代码，通过用户的浏览器发起和其它网站的交互，保护了用户的隐私和安全。

### 2.2 跨域请求可能引发的问题和挑战

跨域请求可能引发的问题包括但不限于无法获取服务器端的数据、无法正确设置和发送一些自定义的HTTP头部、无法通过Cookie进行身份验证等，这些问题需要我们使用合适的方法来解决。

### 2.3 常见的跨域请求场景

常见的跨域请求场景包括跨域Ajax请求、跨源图片、跨源CSS和跨源脚本等。这些场景在实际开发中都需要开发者充分理解和处理跨域请求带来的问题和挑战。

以上是第二章的内容，希望对你有所帮助。如果需要继续了解其他章节的内容，请告诉我。

# 3. Fetch API的跨域请求基础

跨域请求是指在浏览器中，当前页面的域与请求资源的域（协议、域名、端口号任一不同）不一致时发起的网络请求。在Web开发中，跨域请求是一个常见的问题，也是安全性限制较为严格的一种情况。

#### 3.1 使用Fetch API发起简单的跨域请求

在使用Fetch API发起跨域请求时，可以直接使用fetch函数：

fetch('https://example.com/api/data', {
  method: 'GET', // 请求方法
  mode: 'cors', // 请求模式，使用CORS
})
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json(); // 解析 JSON 数据
  })
  .then(data => {
    console.log(data); // 输出获取到的数据
  })
  .catch(error => {
    console.error('Fetch API error:', error);
  });

在这个例子中，我们通过fetch函数向'https://example.com/api/data'发起了一个简单的跨域GET请求。使用fetch函数可以设置请求