Why is my API resquests being made via HTTP and not HTTPS

I have a website set up with VueJS and an API backend.
I have activated the URL Rewrites and the SSL feature.
I’m able to visit my front-end with no problem at all but all the subsequent requests made to the API goes via HTTP and my API doesn’t have any certificate set up. Both of the services are in the same domain (https://quotezito.com).

Console log

Rocket Loader is deactivated.

I’m sure I’m making the requests at my front-end via HTTPS as you can check in my local development set up:

Any advice would be highly appreciated. Thank you for your time and wish you all a happy weekend

Just set up a certificate. You cant make any HTTP calls from an HTTPS page.

Thank you for the suggestion. The problem is that the request is being changed from “HTTPS” to “HTTP” by Cloudflare itself (at least thats what it looks like).

You cant have HTTPS calls in the first place as your host is not configured for HTTPS.

You first need to get a proper certificate for all your hostnames on your server.

Weird because my front-end app doens’t have an SSL certificate and its working just fine. How is that possible?

You need a certificate on your server, otherwise the connection can never be secure. Please configure a certificate on your server, then we can check further should there still be any issues.

1 Like

Thank you for sticking with me @sandro

I have updated the website and both domians now are using a cert from letsecrypt.
You can verify it by visiting https://api.quotezito.com/quote and also https://quotezito.com/

The problem continues to exists. The requests made to the API via the front-end application is being made to the HTTP endpoint.

I’m starting to suspect this is some nginx configuration because after an extensive test in my local machine the front-end application is making the request to the https version of the API.

# configuration file /etc/nginx/sites-enabled/quotezito.com:
server {

  root /usr/share/nginx/vuejs/quotezito;
  #return 200;  

  index index.html;

  server_name quotezito.com;

  add_header X-Frame-Options "SAMEORIGIN";
  add_header X-XSS-Protection "1; mode=block";
  add_header X-Content-Type-Options "nosniff";

  #location / {
  #  try_files $uri $uri/ @rewrites;

  #location @rewrites {
  #  rewrite ^(.+)$ /index.html last;

  location ~* \.(?:ico|css|js|gif|jpe?g|png)$ {
    # Some basic cache-control for static files to be sent to the browser
    expires max;
    add_header Pragma public;
    add_header Cache-Control "public, must-revalidate, proxy-revalidate";

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

server {
#    if ($host = quotezito.com) {
#        return 301 https://$host$request_uri;
#    } # managed by Certbot

  listen 80;
  server_name quotezito.com;
  root /usr/share/nginx/vuejs/quotezito;

#  return 200;
#  return 404; # managed by Certbot


You can see a lot of comments to be able to test several configurations. Once again thank you for your help

Does your server IP address end in 70? If so, there still are no valid certificates I am afraid, nor is there a valid SSL configuration (even accepting the invalid certificate leads to a default page instead of yours).

No. My server ends in .11

The nameservers are from Cloudflare and internally it is pointing to my server.
Weird you are receiving a .70 since I don’t have any IP that ends in .70

Fair enough, in that case lets assume the SSL issue has been fixed, but there is still another issue, that you hardcoded HTTP URLs in your JavaScript code https://quotezito.com/js/app.3195e671.js

["a"].prototype.$backendbaseurl = "http://api.quotezito.com"
u.a.defaults.baseURL = "http://api.quotezito.com"

If you replace this with HTTPS, the mixed content issue should disappear.

Also, make sure your SSL mode on Cloudflare now is “Full strict”.

@sandro jesus christ. How could that escape me?! I have changed it and rebuilt the project 3 times.

I guess there is something going on in my configurations. Thank you for your answer. I will try to check my config files.

Well… This is akward. It was a badly used cp command

Thank you for your help Sandro

This topic was automatically closed after 30 days. New replies are no longer allowed.