reactjs - 无法通过 HTTPS 使用 SSL 访问 Nginx 后面的 Go Rest API

Question

我在数字海洋服务器上运行 Golang rest api 127.0.0.1:8080，并在 上运行 React 前端127.0.0.1:3000。我已经将我的 Nginx 设置为使用 SSL，当我访问我的网站时，wwww.xxx.yyy.com它会将我路由到https. 我的 Nginx 配置当前如下所示：

upstream app {
    server app:8080;
}

upstream interface {
    server ui:3000;
}


# http to https
server {
  listen 80 default_server;
  listen [::]:80 default_server;
  server_name xxx.yyy.com;
  return 301 https://$host$request_uri;
}

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;


    server_name xxx.yyy.com;

    add_header Strict-Transport-Security "max-age=4838400; includeSubDomains";
    add_header 'Content-Security-Policy' 'upgrade-insecure-requests';

    ssl_certificate /etc/ssl/certs/certificate.crt;
    ssl_certificate_key /etc/ssl/private/key.key;


    #  listen to React Server.
    location / {
        proxy_pass http://interface;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;
    }

    location /api {
        proxy_pass http://app;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        add_header 'Content-Security-Policy' 'upgrade-insecure-requests';
        proxy_cache_bypass $http_upgrade;
        proxy_redirect off;
    }
}

问题是我无法通过我的浏览器访问我的https://xxx.yyy.com/apiapi ERR_SSL_PROTOCOL_ERROR。现在，当我的前端尝试访问它时，我会进入控制台日志：

Mixed Content: The page at was loaded over HTTPS, but requested an insecure form action ..... This request has been blocked; the content must be served over HTTPS.

我告诉我的 React 应用程序通过我的 api 访问，http://127.0.0.1:8080因为我在网上阅读的印象是我可以让我的服务在 HTTP 上运行并让 Nginx 处理 SSL。但是我似乎无法让它工作。如果我将地址更改为指向 HTTPS，我会得到一个不同的错误net::ERR_SSL_PROTOCOL_ERROR，我认为这仅仅是因为我的 rest api 未设置为处理 SSL。

如果有人可以提供一些指导，我将非常感激！

标签： reactjsdockergonginxssl