在Firefox开发者控制台使用fetch()时如何获取正确Origin？

问题核心在于：Firefox控制台默认的执行环境不属于当前页面的同源上下文，所以发送请求时会带上Origin: null，哪怕是同域请求，也会被strict-origin-when-cross-origin的CSP策略拦截。

下面是几种可行的解决方法：

• 切换控制台的执行上下文
  Firefox控制台左上角有个下拉菜单（默认显示"顶级上下文"或"null"），选择当前页面的域名（比如internalsite.com），之后在控制台执行的代码会运行在页面的同源上下文里，发送请求时会自动携带正确的Origin和Referer头，同域请求就能正常通过CSP校验。

• 通过页面元素事件触发代码执行
  如果你不想切换上下文，可以把代码绑定到页面的某个事件上，比如点击事件：

  // 在控制台输入这段代码，然后点击页面任意位置
  document.body.addEventListener('click', async () => {
    const req = await fetch('/jsoninfo.json');
    const data = await req.json();
    console.log(data);
    // 执行完移除事件，避免重复触发
    document.body.removeEventListener('click', arguments.callee);
  });
  

  这样代码是在页面的同源上下文里运行的，请求会带上正确的Origin。

• 利用书签脚本（Bookmarklet）
  把代码打包成书签脚本，点击书签时直接在当前页面上下文执行：

  javascript:(async()=>{const req=await fetch('/jsoninfo.json');const data=await req.json();console.log(data);})();
  

  新建一个书签，把上面这段代码作为URL，打开目标页面后点击书签即可执行，同样会在页面上下文运行，携带正确的Origin。

注意：不要尝试手动在fetch的headers里设置Origin头，浏览器会强制拦截这种行为，因为Origin头是由浏览器自动管理的，不允许脚本手动修改。

内容的提问来源于stack exchange，提问作者Tomáš Zato