How to set up CORS in Netlify Serverless function

Question

I couldn't find any way how can I set up CORS using serverless netlify functions. I have used this function example to create my own e-mail form sender:

const nodemailer = require('nodemailer');

exports.handler = function(event, context, callback) {
    let transporter = nodemailer.createTransport({
        host: 'smtp.gmail.com',
        port: 465,
        secure: true,
        auth: {
            type: 'OAuth2',
            user: process.env.MAIL_LOGIN,
            clientId: process.env.CLIENT_ID,
            clientSecret: process.env.CLIENT_SECRET,
            refreshToken: process.env.REFRESH_TOKEN,
            accessToken: process.env.ACCESS_TOKEN
        }
    });
    console.log(event.body);

    transporter.sendMail({
        from: process.env.MAIL_LOGIN,
        to: process.env.MAIL_TO,
        subject: process.env.SUBJECT + new Date().toLocaleString(),
        text: event.body
    }, function(error, info) {
        if (error) {
            callback(error);
        } else {
            callback(null, {
                statusCode: 200,
                body: "Ok"
            });
        }
    });
}

But unfortunately, I am able to send it through every single domain which is not really safe as some people can send spam into that inbox.

Would you be able to follow me to any example? Thank you in advance

Hello! I am not experienced with netlify, but can't you just get the requesting domain (referer) on the request properties and make a condition to stop the script if it isn't the domain you want to allow? — Guilherme Assemany, Apr 20 '19 at 00:49
did you check this? https://github.com/netlify/netlify-lambda#using-with-create-react-app-gatsby-and-other-development-servers — Ali Turki, Apr 20 '19 at 00:51
Thank you guys for your answers. @GuilhermeAssemany I've been thinking about it, but what if someone would fake it in POSTMAN, for example? — user4572896, Apr 20 '19 at 01:04
@BarakatTurki sounds about okay, the problem is that I have to host my React App inside another page, as a widget, so I cannot host my app on the Netlify domain — user4572896, Apr 20 '19 at 01:04
Maybe restricting by IP of the server that hosts the domain? — Guilherme Assemany, Apr 20 '19 at 01:06
There really isn't a way with CORS to stop someone from accessing with Postman. It's not made for that. — itwasmattgregg, Sep 16 '19 at 20:15

score 16 · Answer 1 · answered Sep 17 '19 at 12:22

You can do something like this:

const headers = {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Headers': 'Content-Type',
  'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE'
};

if (event.httpMethod !== 'POST') {
    // To enable CORS
    return {
      statusCode: 200, // <-- Important!
      headers,
      body: 'This was not a POST request!'
    };
 }

Here is how I used it in a larger mapper function:

// src/customers.js
exports.handler = async (event, context) => {
  const path = event.path.replace(/\.netlify\/functions\/[^\/]+/, '');
  const segments = path.split('/').filter(e => e);

  switch (event.httpMethod) {
    case 'GET':
      // e.g. GET /.netlify/functions/customers
      if (segments.length === 0) {
        return require('./customers/read-all').handler(event, context);
      }
      // e.g. GET /.netlify/functions/customers/123456
      if (segments.length === 1) {
        event.id = segments[0];
        return require('./customers/read').handler(event, context);
      } else {
        return {
          statusCode: 500,
          body:
            'too many segments in GET request, must be either /.netlify/functions/customers or /.netlify/functions/customers/123456'
        };
      }
    case 'POST':
      // e.g. POST /.netlify/functions/customers with a body of key value pair objects, NOT strings
      return require('./customers/create').handler(event, context);
    case 'PUT':
      // e.g. PUT /.netlify/functions/customers/123456 with a body of key value pair objects, NOT strings
      if (segments.length === 1) {
        event.id = segments[0];
        console.log(event.id);
        return require('./customers/update').handler(event, context);
      } else {
        return {
          statusCode: 500,
          body:
            'invalid segments in POST request, must be /.netlify/functions/customers/123456'
        };
      }
    case 'DELETE':
      // e.g. DELETE /.netlify/functions/customers/123456
      if (segments.length === 1) {
        event.id = segments[0];
        return require('./customers/delete').handler(event, context);
      } else {
        return {
          statusCode: 500,
          body:
            'invalid segments in DELETE request, must be /.netlify/functions/customers/123456'
        };
      }
    case 'OPTIONS':
      // To enable CORS
      const headers = {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Headers': 'Content-Type',
        'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE'
      };
      return {
        statusCode: 200, // <-- Must be 200 otherwise pre-flight call fails
        headers,
        body: 'This was a preflight call!'
      };
  }
  return {
    statusCode: 500,
    body: 'unrecognized HTTP Method, must be one of GET/POST/PUT/DELETE/OPTIONS'
  };
};

I wrote a tutorial about how to work build serverless databases & netlify functions where I had CORS enabled, you can find the article here.

Very interesting how the error response for not a post needs to stay 200. That was definitely my issue. — blindguy, Oct 28 '21 at 01:48

score 4 · Answer 2 · answered Nov 15 '20 at 12:54

    exports.handler = async (event, context) => {
    return {
      statusCode: 200,
      headers: {
        /* Required for CORS support to work */
        'Access-Control-Allow-Origin': '*',
        /* Required for cookies, authorization headers with HTTPS */
        'Access-Control-Allow-Credentials': true
      },
      body: JSON.stringify({
        message: 'Hello from netlify',
        event: event,
      })
    }
  }

Kevin Ludwig · Answer 3 · 2021-02-26T15:01:57.337

0

You can also use express with cors. It's a way better dynamic handling of cors options.

I extracted my own netlify configuration from my projects and pushed it to GitHub:

https://github.com/kevludwig/netlify-functions-express

There is also an example sending mails using nodemailer.

edited Feb 26 '21 at 15:01

answered Feb 26 '21 at 13:39

Kevin Ludwig

1
2

How to set up CORS in Netlify Serverless function

3 Answers3