Question

我有一个运行NGINX的React应用程序，该应用程序处理一个端口上的流量（www.domain.com- https ），还有一个后端Spring Boot应用程序，它运行在另一个端口上（www.domain.com:7080- http ）。

现在NGINX提供了80、443个端口并加载了我的React应用程序。我的react应用程序经过硬编码以将请求发送到www.domain.com:7080，但是所有请求均失败。在浏览器的控制台中，我可以看到以下错误：

The page at 'https:// domain.com/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http:// domain.com:7080/auth/login'. This request has been blocked; the content must be served over HTTPS.

我的NGINX配置：

server {
    listen 443 ssl; # managed by Certbot

    root /var/www/ui;
    server_name www.domain.com domain.com;

    ssl_certificate /etc/letsencrypt/live/domain.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/domain.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

    location / {
        index index.html;
    }
}

server {
    listen 80;

    if ($host = domain.com) {
        return 301 $host$request_uri;
    } # managed by Certbot

    server_name www.domain.com domain.com;

    return 301 https://$host$request_uri; # managed by Certbot

    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header REMOTE-HOST $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

我的后端应用程序通过http提供服务，我希望允许前端与后端服务对话。

我找不到类似的问题或教程来解决这个问题，因此我希望在这里得到一些答案：3

Answer 1

在您的域中创建api端点，即www.domain.com/api并配置nginx以使用proxy_pass指令将流量从该端点传递到您的后端。您将与用户建立安全的连接，并且无需更改后端服务器中的任何内容。

允许NGINX通过http将请求发送到另一个端口

1 个答案: