CORS problem (Netlify functions)

[dmihalovits]

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?

[perry]

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:

[Support Guide] Can I run a web server, HTTP listener, and/or database at Netlify?

Last reviewed by Netlify Support on December 2022 How do I run a server/database at Netlify? We often get questions about how to run a specific backend server or database at Netlify. Examples of these types of questions include: How to I get my node HTTP listener to respond to requests? How do I start Mongo/MySQL/<insert-some-database-here> running on the server? How can I SSH into my website? We are here today to answer these questions - and the answer is: you can’t! What do you m…

[luke]

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:

Understanding CORS

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

Cross-Origin Resource Sharing (CORS) - HTTP | MDN

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.