Блог

Я создал расширение 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 я обнаружил, что мое расширение отправляло пустое тело сообщения ( "bodySize": 0 в HAR), хотя Content-Length заголовок запроса не был равен нулю, и это привело к тому, что мой API вернул ошибку, и расширение не смогло продолжить свою работу. Есть идеи, почему тело запроса может быть пустым, и как это исправить?

Вам нужно использовать пакет cors npm на вашем сервере (api), а затем просто не добавлять mode: ‘no-cors’ в requestSettings, потому что многие люди допустили эту ошибку. И попробуйте извлечь данные в Chrome без использования запросов, просто извлеките напрямую. Редактировать: это несколько вещей, которые вам нужно сделать в вашем API на основе Express,

api.js будет выглядеть так;

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

скрипт Chrome-расширения:

 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);
``