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

在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.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('There has been a problem with your fetch operation:', error));

在这个例子中，我们向https://example.com/data发送了一个CORS请求，并且设置了credentials为include，表示我们希望发送cookies等凭证信息。如果服务器允许跨域请求，并且返回了适当的数据，我们将能够在控制台中看到这些数据。

二、no-cors模式

当mode设置为no-cors时，表示该请求将不会遵循CORS协议。这意味着，即使请求是一个跨域请求，浏览器也不会发送带有Origin头的预检请求，并且即使服务器返回了带有CORS头的响应，浏览器也会忽略这些头。此外，如果响应的Content-Type不是text/plain、multipart/form-data或application/x-www-form-urlencoded之一，浏览器将不会将其暴露给前端JavaScript代码。

代码示例：

fetch('https://example.com/data', {
  mode: 'no-cors'
})
.then(response => {
  // 由于mode为'no-cors'，这里无法读取到任何跨域响应的内容
  console.log(response.type); // 将会打印出'opaque'
  // 注意：此时无法调用response.json()等方法来解析响应体
})
.catch(error => console.error('There has been a problem with your fetch operation:', error));

在这个例子中，我们向https://example.com/data发送了一个no-cors请求。由于mode为no-cors，我们无法读取到任何跨域响应的内容，response.type将会返回'opaque'。此外，我们还需要注意，此时无法调用response.json()等方法来解析响应体。

三、same-origin模式

当mode设置为same-origin时，表示该请求将仅当目标URL与调用脚本位于同一个源时才会被发送。如果请求是一个跨域请求，浏览器将不会发送该请求，并且会抛出一个错误。

代码示例：

fetch('/data', {
  mode: 'same-origin'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('There has been a problem with your fetch operation:', error));

在这个例子中，我们向/data发送了一个same-origin请求。由于请求和脚本位于同一个源，所以请求将被发送，并且我们可以正常处理响应。如果尝试向一个跨域的URL发送same-origin请求，浏览器将不会发送该请求，并且会抛出一个错误。

总结

fetch API的init参数的mode属性用于定义请求的模式，它决定了请求将如何跨域以及如何处理跨域请求的安全问题。在实际开发中，我们需要根据具体需求选择合适的mode值：

• 如果需要发送跨域请求，并且服务器支持CORS，可以使用cors模式；
• 如果只是需要检测跨域请求是否成功，而不关心响应内容，可以使用no-cors模式；
• 如果只需要向同一个源的URL发送请求，可以使用same-origin模式。

希望本文能够帮助你更好地理解fetch API中的mode属性，并在实际开发中灵活运用。