Gatsby and Node-Express Cors Issues

This is not intended to be a long post, just wanted to make a quick post showing some of the details in order to get a local gatsby development working with a node + express app.

First of all, this is intended if for example you are trying to make a post request to your localhost:5000 express api. This is going to give you a cors - cross-origin: Access-Control-Allow-Origin issue.

Also, take in account, my gatsby project is running @ localhost:8000 and my node app is running @ localhost:5000.

How to solve it: Node

First of all in our node app, we'll install cors npm package:

npm install cors

Then, well add the following config

app.use(cors());

app.all("/*", function(req, res, next) {
   res.header("Access-Control-Allow-Origin", "*");
   next();
});

of course, this is added to our app.js. My specific app.js ended like this:

//First require express
const express = require("express");
// require path for absolute path for sendFile
const path = require("path");
const cors = require("cors");

//initialize express
const app = express();
app.use(cors());

app.all("/*", function(req, res, next) {
   res.header("Access-Control-Allow-Origin", "*");
   next();
});

//Body parser for axios calls
app.use(express.json({ extended: false }));
app.use(express.urlencoded({ extended: false }));

//Mailing Api route
app.use("/api/sendmail", require("./routes/sendmail"));

//if somebody decides to go to / route
app.get("/", (req, res) => {
   res.sendFile(path.resolve(__dirname, "index.html"));
});

const PORT = process.env.PORT || 5000;

app.listen(PORT, console.log(`server started on ${PORT}`));

So we are done, take in to account my api starts with /api/sendmail

How to solve it on gatsby:

We are going to go to our gatsby-config.js file, in the root folder:

and to our module.exports we'll add the following like so:

module.exports = {
   /* Your site config here */
   proxy: {
      prefix: "/api",
      url: "localhost:5000",
   },
};

This is because our node express server is running on localhost 5000.

Now to make use of our api, we'll just axios.post for example to the following adress like so:

axios
   .post("/sendmail/", object)
   .then((response) => console.log(response.config.data));

this will go directly to our localhost:5000/api/sendmail which is defined in our nodejs app.

Test it out!

cheers

Go back to posts