如何从配置了 nginx 并配置了 ssl 的 React 应用程序向 nodejs 后端发送请求

Question

I have generated static files for a reactjs app using create react app tool. I then started an nginx server on a docker container to serve the front end built using reactjs.

The server is interacting with a node js in a different container. The application was working fine until I integrated an ssl certificate to Nginx.

I started to have this error Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://ip_address:8000/api_endpoint. Both containers are hosted on the same machine.

here is configuration file for Nginx:

server {
        #listen [::]:80;
        server_name domain_name.com www.domain_name.com;
        root /var/www/react_app/html;
        index index.html;

        #server_name affiliates-pal.com;
        access_log /var/log/nginx/react-app.access.log;
        error_log /var/log/nginx/react-app.error.log;
       location / {
               try_files $uri /index.html;
        }

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/domain_name.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/domain_name.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}
server {
    if ($host = www.domain_name.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot
    if ($host = domain_name.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

        listen 80;
        server_name domain_name.com www.domain_name.com;
    return 404; # managed by Certbot

}

Should I add anything to CORS defintion in the following startup script for node back end?

const express = require("express");
const bodyparser = require("body-parser");

var app = express();
var cron = require("node-cron");
var sleep = require("system-sleep");

const usersRouter = require("./api-routes");


if(process.env.IP_ADDRESS)
{
    IP_ADDRESS = "http://"+process.env.IP_ADDRESS

}
else
{
    IP_ADDRESS= "http://localhost:3000"
} 
console.log("IP ADDRESS FROM GLOBAL VAR")
console.log(process.env.IP_ADDRESS)
console.log(IP_ADDRESS)

app.use(
  bodyparser.urlencoded({
    extended: true,
  })
);
app.use(bodyparser.json());

var cors = require("cors");
app.use(
  cors({
    origin: [IP_ADDRESS],
    credentials: true,
  })
);

//"http://localhost:3000"
app.use(function (req, res, next) {
  res.header("Access-Control-Allow-Origin", IP_ADDRESS);
  res.header("Access-Control-Allow-Headers", true);
  res.header("Access-Control-Allow-Credentials", true);
  res.header(
    "Access-Control-Allow-Methods",
    "GET, POST, OPTIONS, PUT, PATCH, DELETE"
  );
  next();
});

app.use("/", usersRouter);

cron.schedule("40 11 10 * * *", () => {
  console.log("before sleep");
  sleep(20000);
  console.log("after sleep");
});

const port = process.env.PORT || 8000;
app.listen(port, () => console.log(`Listening on port ${port}..`));

Should I add a proxy configuration for nginx as suggested in this answer ?

Answer 1

We have the same setup and we dont have issues with CORS. Nginx config troubles me. Can you please try this?

server {

        root /path/to/your/static/files;
        index index.html index.htm index.nginx-debian.html;

        server_name subdomain.domain.com(or domain.com); # CHANGE THE NAME UNDER REDIRECT BELOW AS WELL
        location / {

                try_files $uri $uri/ /index.html;
        }

    listen 443 ssl;
    ssl_certificate /path/to/your/cert/fullchain.pem;
    ssl_certificate_key /path/to/your/key/privkey.pem;
}
server {
    if ($host = subdomain.domain.com(or domain.com)) {
        return 301 https://$host$request_uri;
    }



        server_name subdomain.domain.com(or domain.com);
    listen 80;
    return 404;
}