How can I make a (like Python) request with Javascript?

March 1, 2023

if have a Python app running like a charm but now I need to implement some stuff in a Chrome extension so I´m dealing with javascript for this.

The thing is that I need to post a request with a payload, no problem with this with Python but I´m not being able to implemente it with JS.

What´s the best approach to make something like this? I´m trying fetch api and XMLHttpRequest but I´m not being able to post that info correctly…

I have some headers like these:

method: POST
path: /es/info/
scheme: https
accept: */*
accept-encoding: gzip, deflate, br
accept-language: es,es-ES;q=0.9,en;q=0.8
authority: www.midomain.com
cache-control: no-cache
content-length: 205
content-type: multipart/form-data; boundary=----WebKitFormBoundaryasdfasdfasdfY, application/json
method: POST
origin: https://www.midomain.com
pragma: no-cache
referer: https://www.midomain.com/
sec-ch-ua: "Chromium";v="110", "Not A(Brand";v="24", "Google Chrome";v="110"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: same-origin
user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36
x-requested-with: XMLHttpRequest

and some info I want to send, something like:

let miData = {
   'form_key': 'xxxxxxxxx',
   'user': 'yyyyyyyy',
   'action': '1'
}

How can I make it work?

>Solution :

Using the fetch api you can do so :

let miData = {
   'form_key': 'xxxxxxxxx',
   'user': 'yyyyyyyy',
   'action': '1'
}

let url = 'https://www.midomain.com/es/info/'

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Accept': '*/*',
    'Accept-Encoding': 'gzip, deflate, br',
    'Accept-Language': 'es,es-ES;q=0.9,en;q=0.8',
    'Cache-Control': 'no-cache',
    'Origin': 'https://www.midomain.com',
    'Pragma': 'no-cache',
    'Referer': 'https://www.midomain.com/',
    'Sec-Ch-Ua': '"Chromium";v="110", "Not A(Brand";v="24", "Google Chrome";v="110"',
    'Sec-Ch-Ua-Mobile': '?0',
    'Sec-Ch-Ua-Platform': '"Windows"',
    'Sec-Fetch-Dest': 'empty',
    'Sec-Fetch-Mode': 'cors',
    'Sec-Fetch-Site': 'same-origin',
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36',
    'X-Requested-With': 'XMLHttpRequest'
  },
  body: JSON.stringify(miData)
})
.then(response => {
  // handle response
})
.catch(error => {
  // handle error
});

If you prefer the XMLHttpRequest way :

let miData = {
   'form_key': 'xxxxxxxxx',
   'user': 'yyyyyyyy',
   'action': '1'
}

let url = 'https://www.midomain.com/es/info/'

let xhr = new XMLHttpRequest();
xhr.open('POST', url);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Accept', '*/*');
xhr.setRequestHeader('Accept-Encoding', 'gzip, deflate, br');
xhr.setRequestHeader('Accept-Language', 'es,es-ES;q=0.9,en;q=0.8');
xhr.setRequestHeader('Cache-Control', 'no-cache');
xhr.setRequestHeader('Origin', 'https://www.midomain.com');
xhr.setRequestHeader('Pragma', 'no-cache');
xhr.setRequestHeader('Referer', 'https://www.midomain.com/');
xhr.setRequestHeader('Sec-Ch-Ua', '"Chromium";v="110", "Not A(Brand";v="24", "Google Chrome";v="110"');
xhr.setRequestHeader('Sec-Ch-Ua-Mobile', '?0');
xhr.setRequestHeader('Sec-Ch-Ua-Platform', '"Windows"');
xhr.setRequestHeader('Sec-Fetch-Dest', 'empty');
xhr.setRequestHeader('Sec-Fetch-Mode', 'cors');
xhr.setRequestHeader('Sec-Fetch-Site', 'same-origin');
xhr.setRequestHeader('User-Agent', 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36');
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

xhr.onreadystatechange = function() {
  if (xhr.readyState