CODEWITHSUNDEEP
spring-boothttpnginxhttps
curiousdev
curiousdev

Reputation: 636

Allow NGINX to send requests over http to another port

I have a React application running with NGINX which handles traffic on one port (www.domain.com - https) and I also have a back-end Spring Boot application which runs on a different port (www.domain.com:7080 - http).

Now NGINX serves 80, 443 ports and loads up my React application. My react application is hard-coded to send requests to www.domain.com:7080, however all requests fail. In the browser's console I can see the following error:

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.

My NGINX configuration:

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

My back-end application is served over http and I'd like to permit the front-end to talk to the back-end service.

I couldn't locate a similar question or tutorial on how I would go about solving this therefore I'm hoping to get some answers here :3

Upvotes: 0

Views: 522

Answers (1)

marzelin
marzelin

Reputation: 11600

create api endpoint in your domain i.e. www.domain.com/api and configure nginx to pass traffic from that endpoint to your backend with proxy_pass directive. You'll have secure connection from your users and won't need to change anything in your backend server.

Upvotes: 1

Related Questions