CODEWITHSUNDEEP
laravelsslnginxvue.js
Dmitry Malys
Dmitry Malys

Reputation: 1323

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

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
}

Upvotes: 1

Views: 1281

Answers (1)

Dmitry Malys
Dmitry Malys

Reputation: 1323

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.

Upvotes: 1

Related Questions