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.

You can not just convert the cURL parameter names into keys in the fetch options, that is not how it works. fetch does not know what to do with `user`. You need to create the appropriate _header_ this cURL parameter results in, and specify it as such in your fetch call, a header. — CBroe, Jul 22 '20 at 09:56
If this is HTTP Basic Auth - https://stackoverflow.com/questions/43842793/basic-authentication-with-fetch — CBroe, Jul 22 '20 at 09:57
@CBroe I implemented the authentication header and it seems to have worked, but now I have a 400 "Bad request" error from the server — tomvis1984, Jul 22 '20 at 10:20
Not sure if your JS object you specified for body will automatically get converted to JSON, try and supply it as a proper JSON string instead. — CBroe, Jul 22 '20 at 10:24

score 1 · Accepted Answer · answered Jan 29 '21 at 11:54

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!

Implement curl post request in JavaScript Fetch API

1 Answers1