Envoyer du courrier via api mailgun en utilisant uniquement la requête ajax côté client

Question

Je travaille sur localhost (dans une application Web statique React) et sur le formulaire de soumission, je veux envoyer un email via mon formulaire de contact. Donc, je signale au api mailgun comme ceci:

axios({ 
     url: 'https://api:key-someapikey@api.mailgun.net/v3/somesandboxdomain1c.mailgun.org/messages', 
     method: 'post', 
     username: 'api', 
     password: 'key-somekey', 
     data: { 
     from: "Excited User <mailgun@some.example.org>", 
     to: "myemail@gmail.com", 
     subject: "Hello from react app", 
     text: "Testing some Mailgun awesomness!" 
     }, 
     headers: { 
     "Content-Type": "application/x-www-form-urlencoded", 
     'Authorization': `Basic ${window.btoa('api:key-someapikey')}` 
     } 
    }) 
     .then(function (response) { 
     console.log(response); 
     }) 
     .catch(function (error) { 
     console.log(error); 
     }); 

Mais je continue à obtenir cette erreur ou l'un de ses variations:

XMLHttpRequest cannot load https://api.mailgun.net/v3/somesandbox.mailgun.org. Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response. 

J'utilise une application web statique et avoir aucun serveur par lequel envoyer des données Je l'ai déjà essayé d'ajouter et de retirer divers en-têtes tels que Access-Control-Allow-Headers: Authorization etc. Rien ne semble fonctionner

Answer 1

Je ne sais pas si je réponds trop tard, mais vous pouvez essayer ceci:

axios({ 
    method: 'post', 
    url: `${mailgun.baseUrl}/${mailgun.domain}/messages`, 
    auth: { 
     username: 'api', 
     password: mailgun.apiKey 
    }, 
    params: { 
     from: 'Awesome Development Team <noreply@yourdomain.com>', 
     to: 'testing@example.com', 
     subject: 'Hello', 
     text: 'Welcome to the team!' 
    } 
}).then(
    response => { 
     console.log(response) 
    }, 
    reject => { 
     console.log(reject) 
    } 
) 

documentation indique que Mailgun il accepte les paramètres de la demande à la place du corps de la demande, donc dans Axios, vous devez utiliser params au lieu de data.

En ce qui concerne la base Auth requis par Mailgun, Axios fournit une meilleure façon de le faire, qui fournit un objet auth (Reportez-vous au code ci-dessus)

Vous pouvez consulter ces liens pour plus de détails

• https://documentation.mailgun.com/en/latest/api-sending.html#sending
• https://github.com/axios/axios (Faites défiler jusqu'à Config Request)

Hope this helps!