Can I make a "Mailjet" API call using fetch?

Question

I would like to make a request to "Mailjet" API from a react app. To do so, I would like to use fetch API.

According to the documentation, I can use curl :

curl -s \
  -X POST \
  --user "$MJ_APIKEY_PUBLIC:$MJ_APIKEY_PRIVATE" \
  https://api.mailjet.com/v3.1/send \
  -H 'Content-Type: application/json' \
  -d '{
    "Messages":[
      {
        "From": {
          "Email": "toto@toto.fr",
          "Name": "toto"
        },
        "To": [
          {
            "Email": "passenger1@example.com",
            "Name": "passenger 1"
          }
        ],
        "TemplateID": 1074249,
        "TemplateLanguage": true,
        "Subject": "Hi there !",
        "Variables": {}
      }
    ]
  }'

I tried with fetch the following code :

fetch('https://api.mailjet.com/v3.1/send',{
      method : 'POST',
      mode : 'no-cors',
      headers : {
        'Content-Type': 'application/json',
        'client_id':'xxx111',
        'client_secret':'xxx000'
      },
      body : {
                "Messages":[
                            {
                              "From": {
                                "Email": "toto@toto.fr",
                                "Name": "Toto"
                              },
                              "To": [
                                {
                                  "Email": "email@email.com"
                                }
                              ],
                              "TemplateID": 1094249,
                              "TemplateLanguage": true,
                              "Subject": "Hi there",
                              "Variables": {

                              }
                            }
                        ]
              }
    })
    .then(resp=>resp.json())
    .then(data => {
      console.log('data mailjet', data);
    })
    .catch(err => err)

I always got a 401 error "not authorized". I am sure my API keys are not set properly, but I don't really know how I can set them with fetch. Can I make this API call from my react-app or do I need to create my own API and request the resources with node? Thanks a lot!!

According to the documentation, the mailjet API is available with node or curl : https://dev.mailjet.com/email/guides/send-api-v31/ — Jonas, Nov 06 '19 at 16:39
node code runs on the server, React is client-side. You can in theory send a POST request from the client, but that will expose your API secret. Basic http auth goes into the URL: `http://user:password@host/path/...` — , Nov 06 '19 at 16:41
To be clear, you definitely shouldn't. Anybody looking at your source code will be able to send emails in your name, to arbitrary recipients. The proper way is to POST the data to your backend, then run the API request from there. — , Nov 06 '19 at 16:50
@ChrisG so the API call would look like this ? ``` fetch('https://client_id:client_secret/api.mailjet.com/v3.1/send',{...} ``` — Jonas, Nov 06 '19 at 16:53
Yeah I guess that I will do that, but I wanted to know how fetch and curl work :) — Jonas, Nov 06 '19 at 16:54
Yes, in theory that's how it should work. However the server reply will most likely not allow CORS (because the request is supposed to be made by the backend), so it's likely the browser will still block the request. — , Nov 06 '19 at 16:56

score 1 · Answer 1 · answered May 31 '22 at 07:07

1

Regarding Mailjet - use the node integration they provide ;)

import mailjet from 'node-mailjet';

Regarding fetch - add your token in your header, depending on what kind of token the API expects. This will differ whether with each API and wether your doing frontend or backend calls. With Node, save the token as a environment variable and then inject into the Authorization header.

answered May 31 '22 at 07:07

David

425
4
9

Their node package was broken for me, the method ran fine but it was a no-op :/ – kano Aug 02 '22 at 06:37

score 1 · Answer 2 · answered Jun 29 '22 at 05:59

The API key & secret need to be added as a Basic auth header and base64-encoded (use any lib you'd like in Node)

const encoded = base64.encode(`${apiKey}:${apiSecret}`)

fetch('https://api.mailjet.com/v3.1/send', {
  headers: {
    Authorization: `Basic ${encoded}`
  }
})

Docs: https://dev.mailjet.com/sms/reference/overview/authentication/

Can I make a "Mailjet" API call using fetch?

2 Answers2