浅谈在fetch方法中添加header后遇到的预检请求问题

狼蚁网站SEO优化：长沙网络推广经验分享——在fetch方法中添加header遇到的预检请求问题

在网络开发中，我们时常使用fetch API进行网络请求。今天，我在使用fetch方法添加header时遇到了一些问题，现在与大家分享并讨论。

我在fetch中添加了一个自定义的header，像这样：

fetch('x.', {header: {bbbbbbb: 111}})

但当我查看浏览器的请求信息时，我发现我的header消失了，取而代之的是一些新的、我不熟悉的请求头信息。特别是这个：aess-control-request-headers和aess-control-request-method。这些新的请求头信息以及请求的Method变为OPTIONS的现象，被称为预检请求（preflight request）。这是CORS（跨源资源共享）机制的一部分。当一个浏览器发出一个跨域请求时，如果请求包含一些特殊的头信息或使用了非简单HTTP方法（例如PUT、DELETE等），浏览器会先发送一个预检请求到服务器进行权限确认。服务器应返回相应的允许头信息（如Aess-Control-Allow-Origin等），告知浏览器是否允许此次跨域请求。这样，浏览器才会发送实际的请求。如果你在fetch中添加了一些自定义的header或者使用了非GET方法，浏览器可能会发送预检请求。这时，你需要在服务器端进行相应的配置和处理，返回正确的CORS响应头信息。这需要我们查阅MDN文档中关于CORS和预检请求的内容获取更详细的信息。在此附上链接：[