使用 fetch 时强制 Tampermonkey HTTP 版本答案

【问题标题】：Force Tampermonkey HTTP version when using fetch使用 fetch 时强制 Tampermonkey HTTP 版本
【发布时间】：2021-10-05 20:16:15
【问题描述】：

我有一个调用 fetch 的简单测试 TamperMonkey (Firefox) 脚本。

脚本很简单。

    (function() {
       'use strict';
       GM_registerMenuCommand("Test", postData);
    })();

    function postData(){
        fetch('https://https://httpbin.org/post', {
            method: 'POST',
            headers: HEADERS,
            body: JSON.stringify("{test:data}")
        })
    }

但是在不同的网站上运行这个完全相同的脚本会产生不同的请求。

例如，在 StackOverflow 和大多数网站上，它会生成一个 HTTP/2 post。它有效。

（有趣的是，在某些网站上，它会首先发送一个 OPTIONS 请求。这不是问题，只是强调行为可能不同的事实。）

在其他人（例如 Twitter）上，它会改为发送 HTTP/1.1 POST. 然后 API 以 202 响应，但没有任何反应（不返回应该镜像的帖子数据）

有没有办法控制 TamperMonkey 在发出请求时使用哪个 HTTP 版本？

===

根据@DraganS 的评论，我添加了(Connection, upgrade) 和(Upgrade, HTTP/2.0) 标头。似乎没有考虑到它们（我在最终请求中没有看到“升级”，并且Connection 设置为keep-alive。有趣的是，这使得之前没有发送 OPTIONS 请求的网站首先发送。虽然不在 Twitter 上，但仍然在 HTTP/1.1

===

编辑 2：我最初是在测试一个特定的 API，但更新到向 httpbin 发送请求的完整测试脚本（应该只是镜像请求）具有完全相同的行为。

===

开始认为这与 TamperMonkey 无关。

我没有在 Firefox 中收到错误，但在 Chrome 中，从控制台，只是在做一个

fetch('https://httpbin.org/post', {
        method: 'POST',
        body: JSON.stringify('{}')
    })

在 Twitter 上返回

Refused to connect to 'https://httpbin.org/post' because it violates the following Content Security Policy directive: "connect-src 'self' blob: https://*.giphy.com https://*.pscp.tv https://*.video.pscp.tv https://*.twimg.com https://api.twitter.com https://api-stream.twitter.com https://ads-api.twitter.com https://aa.twitter.com https://caps.twitter.com https://media.riffsy.com https://pay.twitter.com https://sentry.io https://ton.twitter.com https://twitter.com https://upload.twitter.com https://www.google-analytics.com https://accounts.google.com/gsi/status https://accounts.google.com/gsi/log https://app.link https://api2.branch.io https://bnc.lt wss://*.pscp.tv https://vmap.snappytv.com https://vmapstage.snappytv.com https://vmaprel.snappytv.com https://vmap.grabyo.com https://dhdsnappytv-vh.akamaihd.net https://pdhdsnappytv-vh.akamaihd.net https://mdhdsnappytv-vh.akamaihd.net https://mdhdsnappytv-vh.akamaihd.net https://mpdhdsnappytv-vh.akamaihd.net https://mmdhdsnappytv-vh.akamaihd.net https://mdhdsnappytv-vh.akamaihd.net https://mpdhdsnappytv-vh.akamaihd.net https://mmdhdsnappytv-vh.akamaihd.net https://dwo3ckksxlb0v.cloudfront.net".

所以原因是 Twitter CORS 政策？这是可以避免的吗？或者这是否意味着不可能有脚本从 twitter.com 发出请求之外的请求？

【问题讨论】：

也许你可以检查developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Upgrade的用途。我对 TM 的理解是它不关心您当前所在的服务器/页面以及背后的协议版本是什么。只关心您从客户端脚本调用的 URL 是什么。
@DraganS 这也是我的理解，但是这是同一个脚本，它的行为不同。在脚本内部，唯一遵守它运行的页面是 window.location.href。但我可以将其更改为硬编码的 example.com 并获得相同的行为。
Twitter 不支持 CORS。

标签： javascript http xmlhttprequest fetch tampermonkey

【解决方案1】：

在 Firefox 中看到的 HTTP 版本不同的事实可能只是一个副作用。

是否存在预检 OPTIONS 请求是正常行为。

错误是由 CSP 引起的，而不是我最初认为的 CORS（我之前的很多错误都与 CORS 相关）。

解决方法：不要使用 fetch，而是使用 GM.xmlhttpRequest 函数。它能够绕过 CSP，但您不会在控制台中看到它。

【讨论】：