Vue JS and Laravel on same server but different port (Issue with SSL)

Question

I have a problem installing SSL on my production server. I'm running Laravel on port 80 and vue js on port 8080. I have installed an SSL certificate.

But now when I try to send any request to the 8000 a have an error:

xhr.js:178 Mixed Content: The page at 'https://www.example.com/login' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://www.example.com:8000/api/auth/login'. This request has been blocked; the content must be served over HTTPS.

This is my NGINX settings:

server {
        listen 8000 default_server;
        listen [::]:8000 default_server ipv6only=on;

        root /var/www/laravel/public;

        index index.php index.html index.htm index.nginx-debian.html;

        server_name example.com www.example.com;

        location / {
                try_files $uri $uri/ /index.php?$query_string;
        }

        location ~ \.php$ {
                include snippets/fastcgi-php.conf;

                fastcgi_pass unix:/run/php/php7.2-fpm.sock;
        }


        location ~ /\.ht {
                deny all;
        }
}

server {
        listen 80;
        listen [::]:80;

        server_name example.com www.example.com;
        error_page 404 /index.html;
        root /var/www/client/dist;
        index index.html;

        location / {
                try_files $uri $uri/ =404;
        }

        listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/example.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
}

Seems it's not possible (or maybe just much more complex) with Letsencrypt certs. See community.letsencrypt.org/t/… and community.letsencrypt.org/t/…. I suggest you use different sub-domains running on standard ports 80 / 443 instead — Phil
– Phil, Commented Oct 10, 2018 at 5:00
@Phil thank you. I guess this is the only solution for now... — Dmitry Malys
– Dmitry Malys, Commented Oct 10, 2018 at 5:15
Well, there's nothing stopping you adding a certificate for your virtual-host running on port 8000, I'm just not sure how you do it. Might be one for serverfault.com — Phil
– Phil, Commented Oct 10, 2018 at 5:16

Dmitry Malys · Accepted Answer · 2018-10-10 08:46:33Z

1

I have solved the problem by moving API to a subdomain and add one SSL certificate on it. And the application is working fine now.

answered Oct 10, 2018 at 8:46

Dmitry Malys

1,3234 gold badges26 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue JS and Laravel on same server but different port (Issue with SSL)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related