Hi,
I hope someone can help me, it would be much appreciated. I tried looking for other solutions already posted but nothing seemed to work.
I have been trying out Netlify functions and following this tutorial (using VueJS and Mailgun): Using serverless functions with Nuxt.js - LogRocket Blog
If I run on the CLI
netlify functions:invoke mail --no-identity --payload '{"email": "my@email.com"}' an email arrives okay! However, when I try and submit it via the browser displays a CORS error when in production, yarn dev using yarn netlify dev.
App: https://hungry-hamilton-94675d.netlify.app/
Access to XMLHttpRequest at 'http://localhost:3000/.netlify/functions/mail' from origin 'http://localhost:8888' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
index.vue?6ced:64 error Error: Network Error
at createError (createError.js?2d83:16)
at XMLHttpRequest.handleError (xhr.js?b50d:84)
xhr.js?b50d:177 POST http://localhost:3000/.netlify/functions/mail net::ERR_FAILED
mail.js:
require('dotenv').config()
const { MG_API_KEY, MG_DOMAIN, MG_HOST } = process.env
var mailgun = require('mailgun-js')({ apiKey: MG_API_KEY, domain: MG_DOMAIN, url: MG_HOST })
exports.handler = async (event) => {
if (event.httpMethod !== 'POST') {
return {
statusCode: 405,
body: 'Method Not Allowed',
headers: { 'Allow': 'POST' }
}
}
const data = JSON.parse(event.body)
if (!data.email) {
return { statusCode: 422, body: 'Email is required' }
}
const mailgunData = {
from: 'jhome@email.com',
to: 'jhome@email.com',
subject: `New mail from`,
html: `
<h4> Email ${data.email} </h4>
`
}
try {
await mailgun.messages().send(mailgunData)
return {
statusCode: 200,
body: 'Your message was sent successfully!',
}
} catch (error) {
return {
statusCode: 422,
body: `Error: ${error}`
}
}
}
index.vue:
<template>
<div class="container">
<form @submit.prevent="sendFormLambda">
<h3 class="text-lg leading-6 font-medium text-gray-900">Test inputs</h3>
<p class="mt-1 text-sm text-gray-500">
This is a test form. Please input any text.
</p>
<div>
<label for="email" class="block text-sm font-medium text-gray-700"
>Email</label
>
<div class="mt-1">
<input
v-model="form.email"
type="text"
name="email"
id="email"
class="p-2 focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 border rounded-md"
placeholder="you@example.com"
/>
</div>
</div>
<div class="pt-5">
<div class="flex justify-end">
<button
type="button"
class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
Cancel
</button>
<button
type="submit"
class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
Save
</button>
</div>
</div>
</form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
email: '',
},
}
},
methods: {
async sendFormLambda() {
try {
const response = await this.$axios.$post(
'/.netlify/functions/mail',
{
email: this.form.email,
}
)
console.log('success')
this.form.email = ''
} catch (error) {
console.log('error', error)
}
},
},
}
</script>
<style>
.container {
@apply mx-auto;
@apply max-w-screen-md;
}
body {
font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
color: #35495e;
}
</style>
It looks like this thread has been a bit quiet since you reached out-- thanks for your patience and for writing such a detailed post! We have been a bit underwater these past few weeks, but we haven’t forgotten you reached out.
