时间戳

首页 > 解决方案 > 如何从配置了 ssl 的 nginx 服务的 React 应用程序向 nodejs 后端发送请求

node.js - 如何从配置了 ssl 的 nginx 服务的 React 应用程序向 nodejs 后端发送请求

问题描述

我已经使用 create react app 工具为 reactjs 应用程序生成了静态文件。然后，我在 docker 容器上启动了一个 nginx 服务器，为使用 reactjs 构建的前端提供服务。

服务器正在与不同容器中的节点 js 交互。在我将 ssl 证书集成到 Nginx 之前，该应用程序运行良好。

我开始有这个错误Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://ip_address:8000/api_endpoint. 两个容器都托管在同一台机器上。

这是 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

}

我应该在以下节点后端的启动脚本中向 CORS 定义添加任何内容吗？

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}..`));

我应该按照这个答案中的建议为 nginx 添加代理配置吗？

标签： node.jsreactjsnginxssl

解决方案

我们有相同的设置，并且我们对 CORS 没有问题。Nginx 配置困扰我。你能试试这个吗？

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

推荐阅读