CODEWITHSUNDEEP
emailwebpackvuejs2
sma
sma

Reputation: 74

sending email through webpack vuejs

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?

Upvotes: 3

Views: 3712

Answers (1)

aks
aks

Reputation: 9491

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 <[email protected]>',
  to: '[email protected]',
  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.

Upvotes: 1

Related Questions