Js中fetch跨域请求

基础概念

fetch 是 JavaScript 中用于发起 HTTP 请求的一个现代 API。它提供了一种简单、强大且灵活的方式来获取网络资源。跨域请求（CORS，Cross-Origin Resource Sharing）是指从一个源（域）的文档或脚本去请求另一个源的资源。

相关优势

1. 简洁性：fetch 的 API 设计简洁，易于理解和使用。
2. Promise 支持：返回的是 Promise 对象，便于进行异步操作。
3. 灵活性：支持各种 HTTP 方法（GET, POST, PUT, DELETE 等）和自定义头部。
4. 流式处理：支持流式传输数据，适合处理大文件或实时数据。

类型与应用场景

类型

• 简单请求：满足特定条件的请求（如 GET、POST 方法，且头部信息有限）。
• 预检请求（Preflight Request）：复杂请求会先发送一个 OPTIONS 请求进行预检，以确认服务器是否允许该请求。

应用场景

• API 调用：从不同的服务器获取数据。
• 资源加载：如图片、视频等多媒体文件。
• 实时通信：通过 WebSocket 或 Server-Sent Events 实现实时数据更新。

遇到的问题及原因

问题：跨域请求被阻止

原因：浏览器的同源策略限制了从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。除非服务器明确允许跨域请求，否则浏览器会阻止这些请求。

解决方法

1. 服务器端设置 CORS 头部： 在服务器响应中添加 Access-Control-Allow-Origin 头部，允许特定的源或所有源访问资源。
2. 服务器端设置 CORS 头部： 在服务器响应中添加 Access-Control-Allow-Origin 头部，允许特定的源或所有源访问资源。
3. 代理服务器： 在同源的服务器上设置一个代理，客户端先请求同源的代理服务器，再由代理服务器转发请求到目标服务器。
4. 代理服务器： 在同源的服务器上设置一个代理，客户端先请求同源的代理服务器，再由代理服务器转发请求到目标服务器。
5. JSONP： 虽然不是现代的最佳实践，但在某些旧系统中仍然有用。JSONP 利用 <script> 标签不受同源策略限制的特性。

示例代码

// 使用 fetch 发起跨域 GET 请求
fetch('https://api.example.com/data', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => {
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('There was a problem with the fetch operation:', error));

通过上述方法，可以有效解决 JavaScript 中使用 fetch 进行跨域请求时遇到的问题。