Home
Support Forums

CORS problem (Netlify functions)

Access to XMLHttpRequest at https://quizzical-abcd-abcd123.netlify.app/.netlify/functions/contact from origin https://www.mygoogledomain.com 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.
POST https://quizzical-abcd-abcd123.netlify.app/.netlify/functions/contact net::ERR_FAILED

I get this CORS error when I try to access a Netlify function (deployed to Netlify through GitHub) from my website (also deployed to Netlify). This is a simple contact function, send an email through the contact form. My domain is from Google Domains.

This is the axios post request in my React file:

await axios
            .post(
                "https://quizzical-abcd-abcd123.netlify.app/.netlify/functions/contact",
                {
                    name: name,
                    email: email,
                    message: message,
                }
            )
            .then...

This is the contact file:

const express = require("express");
const compression = require("compression");
const cors = require("cors");
const bodyParser = require("body-parser");
const nodemailer = require("nodemailer");
const { google } = require("googleapis");
require("dotenv").config();

const app = express();

app.use(compression());
app.use(cors());
app.use(express.json({ extended: true }));
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.post("/contact", async (req, res) => {
    //contact code here

});

I use CORS in my server file. I also tried to put a netlify.toml file in the root directory and in the build directory too but still got the error. What should I do?

hi there, sorry to be slow to respond! Are you trying to run a server on Netlify?

Here is a good summary of what you can and can not do on Netlify you might find helpful:

Hi, @dmihalovits.
Generally speaking, if someone is visiting your page at the custom domain (www.mygoogledomain.com) and you make an API call to the site subdomain under netlify.app (like quizzical-abcd-abcd123.netlify.app) then you are not using the same domain name and you are going to trigger CORS errors if there is a CORS policy in place (unless the CORS policy specifically allow this). If you want to learn more about CORS, there is a StackOverflow post here:

Also, the MDN documentation on CORS is amazingly well written (in my opinion at least):

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

In most cases, you can simply remove the domain from the URL leaving the path only. This will cause the axios API call to target the same domain the page is already using.

In other words, just make the POST API call this:

await axios
            .post(
                "/.netlify/functions/contact",
                {
                    name: name,
                    email: email,
                    message: message,
                }
            )

That should automatically use the correct domain name. If that doesn’t work, please let us know. Also, if you send is a link to the actual site (or tell us the API ID for the site), we can take a look at the headers you are sending.