javascript - 使用 JavaScript，是否可以从传出的获取请求中捕获正文有效负载？

Question

所以我想向现有的网站添加一些功能，这是为了让我的生活更轻松。我需要但我似乎无法弄清楚的事情之一是:如何捕获特定的传出“POST”请求的正文有效负载数据。我之前找到了执行此操作的代码，但没有保存，并且我已经搜索了该代码 2 天，但没有结果。

这里是网站向服务器发出请求的示例。

fetch("https://my.site/api/req", {"credentials":"include","headers":{"accept":"*/*","content-type":"application/json"},"referrerPolicy":"no-referrer-when-downgrade","body":"{\"symbol\":\"mySYM\",\"results\":[{\"data\":{\"id\":\"dataID\"},\"result\":\"signature\"}]}","method":"POST","mode":"cors"});

我需要捕获的部分是“body”部分，然后将其取消转义，使其看起来像这样。

{"symbol":"mySYM","results":[{"data":{"id":"dataID"},"result":"signature"}]}

另外，如果可能的话，我希望它只在 method = POST 时捕获数据并请求转到特定的 URL，因此它将捕获/api/req/而不会注意其他 URL 和/或当方法是 = GET, HEAD。

目前，我使用开发工具手动从请求中获取数据，然后单击正确的请求，然后向下滚动以查找 POST 数据。

如果您需要知道原因。服务器通过 websocket 连接对数据进行签名，我本质上是试图捕获该签名以便能够重播它。我不想捕获 websocket 数据，因为它不完整，无法满足我的需求，我需要捕获整个传出请求正文数据。

提前致谢。

Answer 1

选择的解决方案:

感谢@thirtydot 的回复。请注意，我的具体情况仅涉及获取请求，因此这就是我采用此路线的原因。有了你的回应，我自己的研究，以及这个post的帮助我想出了这个解决方案。因为我不太关心看到回复(我有其他功能来处理对我来说很重要的回复)。

const constantMock = window.fetch;
 window.fetch = function() {
    if (arguments[0] === '/api/req' && arguments[1].method === 'post'){
        bodyResults(arguments[1].body)
    }
    return constantMock.apply(this, arguments)
 }


function bodyResults(reqBody){
    console.log(reqBody)
}

将以下内容放入控制台(完全按照我想要的那样)。

{"symbol":"NEON","results":[{"data":{"expires_at":"1561273300","id":"2469c8dd"},"signature":"6d712b9fbb22469c8dd240be13a2c261c7af0dfbe3328469eeadbf6cda00475c"}]}

但现在我可以通过该函数返回这些数据，并继续完全自动化地运行脚本的其余部分。

额外解决方案:

如果其他人遇到类似的问题并关心捕获这些获取请求的响应，我可以选择使用:

const constMock = window.fetch;
window.fetch = function() {
    if (arguments[0] === '/api/req' && arguments[1].method === 'post'){
        bodyResults(arguments[1].body)
    }

    return new Promise((resolve, reject) => {
        constantMock.apply(this, arguments)
            .then((response) => {
                if(response.url.indexOf("/me") > -1 && response.type != "cors"){
                    console.log(response);
                    // do something for specificconditions
                }
                resolve(response);
            })
            .catch((error) => {
                reject(response);
            })
    });
}

function bodyResults(reqBody){
    console.log(reqBody)
}

可能的 XHR 解决方案

注意:这个未经测试! XHR 请求的替代解决方案可以使用类似的方法来完成:

(function(open) {
  XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
    alert('Intercept');
    open.call(this, method, url+".ua", async, user, pass);
  };
})(XMLHttpRequest.prototype.open);

希望这有帮助!