Question

我需要在浏览器中使用自定义请求标头发出HTTP GET请求，并在流入时处理结果.Fetch API非常适用于此：

fetch('https://example.com/resource', {
  method: 'GET',
  headers: {
    'X-Brad-Test': 'true'
  },
  cache: 'no-store',
  mode: 'cors'
}).then((res) => {
  const reader = res.body.getReader();
  // etc.
});

这很有效。由于存在自定义标头，因此浏览器会使用OPTIONS请求将请求预先发送到/resource。我已将服务器配置为使用204 No Content和以下标头进行回复：

Access-Control-Allow-Headers: X-Requested-With, Range, If-Range, X-Brad-Test
Access-Control-Allow-Origin: *

浏览器对此感到满意，然后发出GET请求，服务器返回带有数据的200 OK，浏览器允许我访问响应标题和正文。

当存在重定向时，问题就出现了。 OPTIONS请求与204 No Content以及与之前相同的标头成功。浏览器发出正确的GET请求，并在服务器上发送带有302标头的Location:。 Chrome会引发以下错误：

Fetch API无法加载https://example.com/resource。从＆＃39; https://example.com/resource＆＃39;重定向到＆＃39; http://some-other-origin/resource＆＃39;已被CORS政策阻止：请求需要预检，不允许遵循跨源重定向。

这是出乎意料的，对我来说似乎毫无意义。我希望浏览器遵循重定向，并为这个新位置做另一个飞行前请求，但它没有这样做。

陌生人仍然是我可以在这个客户端进行黑客攻击。我可以在没有自定义标头的情况下发出HTTP请求，通过查看Response对象找出重定向后的结果，然后使用我的自定义标头在新目标上发出第二个请求。当然，这在所有情况下都不起作用，我宁愿不依赖这种黑客攻击。我宁愿找到合适的方式。

两个问题：

允许客户端遵循重定向的正确方法是什么？我可以使用某种Access-Control-*标题吗？
为什么存在此限制？不跟踪并在后续网址上运行预运行会阻止哪些安全问题？

Answer 1

支持重定向到需要预检的请求是Fetch（定义CORS）的最新更改。

https://github.com/whatwg/fetch/commit/0d9a4db8bc02251cc9e391543bb3c1322fb882f2

我相信一些实现已经开始调整他们的实现，但这需要一些时间才能覆盖所有人。

获取API，自定义请求标头，CORS和跨源重定向

1 个答案: