CODEWITHSUNDEEP
javascriptnode.jscors
HJW
HJW

Reputation: 1032

CORS on server header

I am deploying a simple node server and a React app to Netlify. The React App makes an API request to the server, and uses cors via const cors = require("cors"); in version 2.8.5.

At first I specified the following (server.js)

app.use(
  cors({
    origin: CLIENT_ORIGIN
  })
);

which only seems to tell the server "I am using CORS," but does not specifically set any headers or permit any whitelisted websites to access the server. I then set the CLIENT_ORIGIN in a .env file in my dev environment, and via the Build environment variables on Netlify. I deployed a new built for both the server and front-end, however I must have gotten it wrong somewhere:

Access to fetch at 'https://serverUrl.com/example/get' from origin 
'https://react-app-example.com' has been blocked by CORS policy: No 'Access- 
Control-Allow-Origin' header is present on the requested resource. If an 
opaque response serves your needs, set the request's mode to 'no-cors' to 
fetch the resource with CORS disabled.

I then tried setting: 

app.use(function(req, res, next) {
  res.header(
    "Access-Control-Allow-Origin",
    "https://react-app-example.com"
  );
  res.header("Access-Control-Allow-Headers", "Content-Type,Authorization");
  res.header("Access-Control-Allow-Methods", "GET,POST,PUT,PATCH,DELETE");
  if (req.method === "OPTIONS") {
    return res.sendStatus(204);
  }
  next();
});

which also did not work. The error message remained the same. The thing that irks me is that I have a similar from from a few months ago which is built very similarly, but stays on heroku. The same methods as described above work without problem.

What am I missing?

Upvotes: 0

Views: 1990

Answers (1)

HJW
HJW

Reputation: 1032

After trying various things I finally arrived at the fact that Netlify does not support Node apps by itself (without extra tedious config).

The closest solution can be found here in another answer or via another service like Heroku. The major issue I have with heroku is that when the dyno (in my case the server providing API routes) doesn't get called for a while it goes to sleep to save resources, and in turn takes a whole lot longer to respond on the first call. Have not found any other free solution for node/express apps that serve API routes, yet.

UPDATE: Heroku and Netlify don't play along nicely unless you add the following CORS parameters to the backend:

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", CLIENT_ORIGIN);
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  res.header("Access-Control-Allow-Methods", "GET,POST,PUT,PATCH,DELETE");
  res.header("Access-Control-Allow-Credentials", true); <--- this is the only different line I added.
  if (req.method === "OPTIONS") {
    return res.sendStatus(204);
  }
  next();
});

And then the following to the front end request via fetch:

fetch(`${API_BASE_URL}/dept/get/`, {
      method: 'GET',
      credentials: 'include', <-- this is the most important change
    })
      .then((res) => {...}

Upvotes: 1

Related Questions