sending email through webpack vuejs - email

Question

I'm a beginner in vuejs2 and I'm trying to make a simple contact form (using webpack and vuejs2).
I've created my form with the send button pointing to the following method:
<button #click.prevent="sendemail" class="btn btn-xl">Send</button>
And the method:
methods: {
sendemail () {
var mailgun = require('mailgun.js')
var mg = mailgun.client({username: 'MYUSERNAME', key: MYAPIKEY})
mg.messages.create('MYDOMAIN', {
from: 'FROMEMAIL',
to: ['TOEMAIL'],
subject: 'SUBJECT',
text: 'TEXT'
})
.then(msg => console.log(msg)) // logs response data
.catch(err => console.log(err)) // logs any error
}
}
When I press send button I get the following error:
XMLHttpRequest cannot load https://api.mailgun.net/v3/MYDOMAIN/messages. Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.
Any suggestions or any other way to do it?

Answer 1

The mailgun-js docs specify a way on how can we do this:
var api_key = 'key-XXXXXXXXXXXXXXXXXXXXXXX';
var domain = 'www.mydomain.com';
var mailgun = require('mailgun-js')({apiKey: api_key, domain: domain});
var data = {
from: 'Excited User <me#samples.mailgun.org>',
to: 'serobnic#mail.ru',
subject: 'Hello',
text: 'Testing some Mailgun awesomness!'
};
mailgun.messages().send(data, function (error, body) {
console.log(body);
});
Also a word of caution, I would not put the api_key in my frontend as anyone can use it and send emails. Instead, try opting for a backend which will send emails for you.