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

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.从' https://example.com/resource ' 重定向到' http:// some-other-origin/resource '已被CORS策略阻止:请求需要预检,不允许遵循跨源重定向.

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

更奇怪的是,我可以在这个客户端进行黑客攻击.我可以在没有自定义标头的情况下发出HTTP请求,通过查看Response对象找出重定向后的结果,然后使用我的自定义标头在新目标上发出第二个请求.当然,这并不适用于所有情况,我宁愿不依赖这个黑客.我宁愿找到一个合适的方法.

两个问题:

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

Answer 1

支持重定向到需要预检的请求是最近对Fetch(定义CORS)的更改.

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

我相信一些实现已经开始调整它们的实现,但这需要一些时间才能达到每个人.