Chrome 扩展发送空的 POST 正文答案

【问题标题】：Chrome extension sending empty POST bodyChrome 扩展发送空的 POST 正文
【发布时间】：2021-11-29 11:06:56
【问题描述】：

我创建了一个 Chrome 扩展程序，它收集一些数据并向我的服务器发送 POST 请求。发送这个请求的代码很简单：

var payload =
{
    prop1: 'SomeValue',
    prop2: 'SomeValue',
    ...
};
var requestSettings = {
    method: 'POST',
    headers: {
        'Content-Type': ' application/json'
    },
    body: JSON.stringify(payload)
};
var webRequest = new Request("https://mysite.xyz/api/process", requestSettings);
var response = await fetch(webRequest);

它在大多数情况下都可以正常工作，但是我的一些用户抱怨扩展程序无法正常工作，因此我要求他们创建一个 HAR 文件以查看扩展程序发送的请求有什么问题。

在检查了HAR file 之后，我发现我的扩展正在发送一个空的POST 正文（HAR 中的"bodySize": 0），尽管Content-Length 请求标头不为零，这导致我的API 返回错误，并且扩展无法继续工作。任何想法为什么请求正文可以为空，以及如何解决它？

【问题讨论】：

标签： javascript google-chrome-extension fetch-api

【解决方案1】：

你需要在你的服务器（api）中使用 cors npm 包，然后不要在 requestSettings 中添加 mode: 'no-cors' 因为很多人都犯了这个错误。并尝试在不使用请求的情况下在chrome中获取数据，直接获取。编辑：这些是您需要在基于 express 的 api 中做的一些事情，

api.js 看起来像这样；

const app = require('express')();
const cors = require('cors');
app.use(cors())
app.use(express.json())

chrome-extension 的脚本：

var payload =
{
    prop1: 'SomeValue',
    prop2: 'SomeValue',
    ...
};
var requestSettings = {
    method: 'POST',
    headers: {
        'Content-Type': ' application/json'
    },
    body: JSON.stringify(payload)
};

var response = await fetch("https://mysite.xyz/api/process", requestSettings);
``

【讨论】：