fetch API深入解析：init参数中的mode属性

最新推荐文章于 2025-03-06 22:36:06 发布

红衣大叔

最新推荐文章于 2025-03-06 22:36:06 发布

阅读量954

点赞数 4

分类专栏： javascript帮助文档 nodejs帮助文档文章标签： javascript fetch 红衣大叔

本文链接：https://blog.csdn.net/gusushantang/article/details/141534166

版权

在Web开发中，fetch API已成为发送HTTP请求的主流方式。它提供了一个简洁易用的接口，用于异步访问网络资源。然而，在使用fetch时，我们经常会遇到跨域请求的问题。为了解决这个问题，fetch API的init参数中提供了一个mode属性，用于定义请求的模式，以决定如何处理跨域请求。本文将深入解析mode属性的三个值：cors、no-cors和same-origin，并提供相应的代码示例。

一、cors模式

当mode设置为cors时，表示该请求将遵循CORS（跨源资源共享）协议。这意味着，如果请求是一个跨域请求，浏览器将会发送一个带有Origin头的预检请求（如果需要的话），并且服务器需要返回一个带有适当CORS头的响应，以允许跨域请求。

代码示例：

fetch('https://example.com/data', {
   
  mode: 'cors', // 默认模式，通常可以省略
  credentials: 'include' // 发送cookies等凭证信息
})
.then(response => {
   
  if (!response