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. — C3roe
– C3roe, Commented Jul 22, 2020 at 9:56
If this is HTTP Basic Auth - stackoverflow.com/questions/43842793/… — C3roe
– C3roe, Commented Jul 22, 2020 at 9: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
– tomvis1984, Commented Jul 22, 2020 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. — C3roe
– C3roe, Commented Jul 22, 2020 at 10:24

Rosan · Accepted Answer · 2021-01-29 11:54:02Z

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!

answered Jan 29, 2021 at 11:54

Rosan

462 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Implement curl post request in JavaScript Fetch API

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related