Fetch 设置请求模式-JavaScript中文网-JavaScript教程资源分享门户

Fetch API 提供了多种方式来控制请求的行为，其中之一便是设置请求模式。请求模式定义了请求的范围和安全限制，确保请求符合预期的安全策略。以下是关于如何使用 Fetch API 设置请求模式的详细指南。

请求模式简介

请求模式决定了请求的上下文环境以及请求数据的来源。它主要影响跨域请求和同源策略的执行方式。常用的请求模式包括：

same-origin：仅允许从同一个源发起请求。
no-cors：允许跨源请求，但返回的数据不能用于 JavaScript 操作。
cors：允许跨源请求，并且可以读取响应内容。

同源策略与跨域请求

同源策略是浏览器的一种安全机制，它限制了一个源的文档或脚本如何与另一个源的资源进行交互。两个 URL 被认为是同源的，当且仅当它们具有相同的协议、域名和端口。例如，https://example.com 和 http://example.com 不是同源的，因为它们使用的协议不同。

跨域请求指的是试图从一个源向另一个源发送 HTTP 请求。为了防止恶意操作，浏览器默认会阻止跨域请求，除非目标服务器明确允许跨域访问。

设置请求模式

在使用 Fetch API 发送请求时，可以通过配置 mode 属性来指定请求模式。以下是如何在不同的场景下设置请求模式的示例。

设置为 `same-origin`

当你希望请求严格限定于同源策略之内时，可以将 mode 设置为 same-origin。这种方式通常用于确保敏感数据不会被意外地暴露给外部源。

fetch('/data.json', {
    mode: 'same-origin'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

设置为 `no-cors`

使用 no-cors 模式可以发起跨源请求，但是这种请求有一些限制：

无法使用 Authorization 头。
无法使用自定义的 HTTP 头。
返回的响应对象上只有 ok, status, statusText, headers 等只读属性可用。
响应体只能通过 .arrayBuffer(), .blob(), .formData(), .json(), .text() 方法访问，但不能直接通过 JavaScript 操作。

fetch('https://another-domain.example/api/data', {
    mode: 'no-cors'
})
.then(response => response.text())
.then(text => console.log(text))
.catch(error => console.error('Error:', error));

设置为 `cors`

cors 模式允许发起跨源请求，并且允许客户端完全控制响应的内容。为了实现这一点，服务器需要在响应头中添加适当的 CORS 头信息，比如 Access-Control-Allow-Origin。

// www.javascriptcn.com code example
fetch('https://api.example.com/data', {
    mode: 'cors',
    headers: {
        'Content-Type': 'application/json'
    }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

实践中的注意事项

在实际应用中，选择合适的请求模式非常重要，这不仅关系到安全性，还影响应用程序的功能实现。例如，在开发需要跨源请求的应用时，必须考虑到服务器端的 CORS 配置，否则请求可能会失败。

此外，如果应用需要处理大量的跨源请求，考虑使用代理服务器也是一个不错的选择，这样可以避免频繁修改服务器端的 CORS 设置，同时也能提高应用的灵活性和可维护性。

通过以上介绍，我们可以看到 Fetch API 的请求模式功能强大，能够帮助开发者更好地管理和控制网络请求，从而构建更加安全、高效的 Web 应用程序。

Fetch 设置请求模式