Implement curl post request in JavaScript Fetch API

Question

I'm trying to implement this post request using curl in the JS Fetch API:

curl --user apikey:{my_secret_apikey} --request POST --header "Content-Type: application/json" --data "{\"text\":[\"Hello\"],\"model_id\":\"en-es\"}" "{my_secret_url}/v3/translate?version=2018-05-01"

I'm having trouble implementing the API key.

I tried this, but it doesn't work. I get a 401 unauthorized error back from the server.

fetch(url, {
    method: "POST",
    headers: { 'Content-Type': 'application/json' },
    user: {
        "apikey": blablabla_api_key
    }
    body: {
        "text": [term],
        "model_id": "en-hi"
    }
}).then(res ........

Any help is appreciated!

edit: if you have any other suggestion as to how to implement this post request into JS using some other HTTP library, that helpful too!

Edited code with auth header:

let headers = new Headers();

headers.append('Authorization', 'Basic ' + btoa("apikey" + ":" + "my_api_key"));
headers.append('Content-Type', 'application/json');
fetch(url, {
    method: "POST",
    headers: headers,
    body: {
        "text": ["Hello"],
        "model_id": "en-es"
    }
}).then(result => {
    console.log(result);
    resolve(result.translations[0].translation);
}).catch(err => console.log(err));

This results in a 400 Bad Request error, even though the curl request works fine.

Answer 1

hopefully, I am not too late with answering your question. I encountered the same problem as you did and my solution was to encode the authorization into base64.

https://observablehq.com/@mbostock/fetch-with-basic-auth#:~:text=To%20use%20basic%20authentication%20with,result%20in%20a%20401%20error.

I am using Node.js, so I needed to use a Buffer for the encoding process. If I understood your problem correctly, you'd have to do the following:

let buffer = Buffer.from(apikey:{my_secret_apikey})
let base64data = buff.toString('base64')

Your authorization header should then be set to something like this:

headers: {'Authorization': `Basic ${base64data}`}

This helped me a to solve at least the problem I was struggling with. Hope it works for you as well!