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, Jul 24 '23 at 02: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, Jul 24 '23 at 04:41
Does this answer your question? [Fetch request to http address from a https website](https://stackoverflow.com/questions/72402003/fetch-request-to-http-address-from-a-https-website) — Phil, Jul 24 '23 at 05:22

score 0 · Answer 1 · answered Jul 24 '23 at 03:47

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();
});

Why would you need to duplicate all the headers already added by the CORS middleware? — Phil, Jul 24 '23 at 05:20

Failed to fetch from react app to nodejs server on AWS

1 Answers1