Content must be served over HTTPS

Hi, i’m trying run Vuestorefront + Magento2 on production. I have everything in one docker-compose file in the same network.
I already have SSL certificate for my domain and I configured nginx as reverse proxy for vue and Magento2. Everything works fine except XHR fetch data by vuestorefront from vuestorefront-api
I got error in the browser:

"searchAdapter.ts:75 Mixed Content: The page at 'https://my-domain.com/' was loaded over HTTPS, but requested an insecure resource 'http://appvueapi:8080/api/catalog/vue_storefront_magento_default/attribute/_search?_source_include=activity%2Cattribute_code%2Cid%2Centity_type_id%2Coptions%2Cdefault_value%2Cis_user_defined%2Cfrontend_label%2Cattribute_id%2Cdefault_frontend_label%2Cis_visible_on_front%2Cis_visible%2Cis_comparable%2Ctier_prices%2Cfrontend_input&from=0&request=%7B%22query%22%3A%7B%22bool%22%3A%7B%22filter%22%3A%7B%22terms%22%3A%7B%22attribute_code%22%3A%5B%22color%22%2C%22size%22%2C%22price%22%2C%22erin_recommends%22%2C%22activity%22%2C%22type_id%22%2C%22sku%22%2C%22name%22%2C%22tax_class_id%22%2C%22final_price%22%2C%22special_price%22%2C%22special_to_date%22%2C%22special_from_date%22%2C%22price_incl_tax%22%2C%22original_price_incl_tax%22%2C%22original_price%22%2C%22special_price_incl_tax%22%2C%22id%22%2C%22image%22%2C%22sale%22%2C%22new%22%2C%22product_links%22%2C%22url_path%22%2C%22url_key%22%2C%22status%22%2C%22tier_prices%22%5D%7D%7D%7D%7D%7D&size=150&sort='. This request has been blocked; the content must be served over HTTPS."

My nginx configuration:

location /api/ {
	proxy_pass http://appvueapi:8080/api/;
	# proxy_pass http://localhost:8080/api/ # also don't work
}

It seems like i need ssl on my vuestorefront-api.
My question is, how to configure vuestorefront-api to run with HTTPS protocol? I can’t find any configuration for this.

Hi, here’s one way of doing it (there are other ways)

  1. Create a subdomain like api.example.com
  2. Install a cert for that subdomain
  3. In VS config/local.json change the VS-API url to https, like this:
"api": {
    "url": "https://api.example.com"
  }
  1. In the Nginx config for VS-API, listen on https and proxy to the API running on localhost. Here’s a very barebones config example (needs more to be optimal):
server {
  server_name api.example.com;
  listen 443 ssl;
  # ...
  # SSL, Headers, caching, etc
  # ...
  location /api/ {
    proxy_pass http://localhost:8080/api/;
  }
  location /img/ {
    proxy_pass http://localhost:8080/img/;
  }
}
server {
  # redirect http requests to https
  server_name api.example.com;
  listen 80;
  if ($host = api.example.com) {
    return https://$host$request_uri;
  } 
  return 404;
}

Alternatively, you can use a single domain, like https://example.com, if both VS and VS-API are on the same server, or can be proxied from one Nginx server. I find this configuration in Nginx can get a bit complicated, so personally I prefer a separate subdomain.

Also make sure your image url in VS config/local.json is using https. Check images.baseUrl

Thanks for the idea. I resolved that using ports instead of subdomain. Works fine.

Better solution is to install front-proxy behind the application responsible for all SSL offload. Then you will be able to route to any applications by specific URL.

By enabling API server using unsecure HTTP protocol you may get security issues as passwords and/or other sensitive data are accessible in decoded format on the internet port.

Best solution is application containerization with front-proxy and ssh daemons listening on Internet ports only. nginx-proxy, envoy, traefik, haproxy, and other solutions can be configured to serve as front-proxy.