Failed to fetch from react app to nodejs server on AWS

Question

I have vitejs(react) front-end application and a nodejs backend server which I want to use to query a mysql database. This works fine on my computer but on AWS I'm getting a 'failed to fetch' error. I'm not sure if this is caused by cloudfront, nginx, the nodejs server on port 3001, or making an http fetch request from a https website. I would like to know which page I need to fix. The node.js api I can access fine both from ip:3001/api and localhost:3001/api.

Fetch on App.tsx

  useEffect(() => {
    fetch("http://localhost:3001/api")
      .then((res) => res.json())
      .then((data) => setData(data.message))
      .catch(rejected => {
                console.log(rejected);
                })
  }, []);

the nodejs server port 3001 code

import express from "express";
import cors from "cors";
const app = express();

app.use(express.json());
 app.use(cors())


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


app.get("/api", (req, res) => {
var allowedOrigins = ['https://example.com']
res.header('Access-Control-Allow-Origin', allowedOrigins)
  res.json({
  "message": "dynamic json",
  "mytest": "server"
        })
});

app.listen(PORT, () => {
  console.log(`Server listening on ${PORT}`);
  console.log(`Server running`);
});

nginx conf.d

server {
  listen 80;
  listen 443;
  server_name _;

  location /api {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-NginX-Proxy true;
    proxy_pass http://localhost:3001;
    proxy_ssl_session_reuse off;
    proxy_set_header Host $http_host;
    proxy_cache_bypass $http_upgrade;
    proxy_redirect off;
  }
}

"making an http fetch request from a https website" 👈 this would definitely be a problem — Phil
– Phil, Commented Jul 24, 2023 at 2:29
I changed it to another server I own fetch("https://example2/api") and it works but it seems like a bad hack. Isn't it a big security concern? It's fine here since this is just a project for the purpose of learning react but this exposes the data to anyone who goes to that route. — Dong
– Dong, Commented Jul 24, 2023 at 4:41
Does this answer your question? Fetch request to http address from a https website — Phil
– Phil, Commented Jul 24, 2023 at 5:22

Dipesh Lohani · Accepted Answer · 2023-07-24 03:47:17Z

0

Did you try sending a corsOption in cors(). Whitelist the origin from the client in nodejs. Using a CORS module without whitelist option behaves differently in production.

    const corsOptions = {
      origin: 'http://localhost:3000',
    };
    app.use(cors(corsOptions));

Here, update the port with your react port.Also add the below lines in node code.

//Cors Configuration
app.use(function (req, res, next) {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader(
    "Access-Control-Allow-Methods",
    "GET, POST, OPTIONS, PUT, PATCH, DELETE"
  );
  res.setHeader(
    "Access-Control-Allow-Headers",
    "access_token,refresh_token,X-Requested-With,content-type"
  );
  next();
});

answered Jul 24, 2023 at 3:47

Dipesh Lohani

3463 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Phil Over a year ago

Why would you need to duplicate all the headers already added by the CORS middleware?

Dipesh Lohani Over a year ago

Looks like it was http -> https bug rather than CORS entirely.

Collectives™ on Stack Overflow

Failed to fetch from react app to nodejs server on AWS

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related