I have a react app, using axios to call spring boot app API. Spring boot app has common request mapping http://localhost:8080/api

This is the settings in development locally:

axios.defaults.baseURL = 'http://localhost:8080/api';

I build react app using npm run build and build spring boot app into a jar file, then copy them to my VPS server, run the jar file using java -jar.

This is the nginx /etc/nginx/sites-available/my-app setting:

server {
    listen 443 ssl;
    listen [::]:443 ssl;
    include snippets/self-signed.conf;
    include snippets/ssl-params.conf;

    server_name <MY_IP>;

    root /tmp/html;
    index index.html;

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

    location /api/ {
        proxy_pass http://localhost:8080; # Forward API requests to Java backend
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

server {
    listen 80;
    listen [::]:80;
    server_name <MY_IP>;
    return 302 https://$server_name$request_uri;
}

I can access react page on https but when it calls spring API, it seems like there is connection issue. This is the error when react tries to call spring API:

(failed)net::ERR_CONNECTION_REFUSED

If I change axios base url like this: axios.defaults.baseURL = 'https://<MY_IP>:8080/api';
Then this error happens: net::ERR_SSL_PROTOCOL_ERROR

How should I make the react connects to spring api successfully?