Blocked loading mixed active content

[biladina]

Ziggy version

v2.5.1

Laravel version

v12.8.1

Description

hi, I just using this ziggy and encounter some problem. I build app that using docker, local domain and local SSL (self signed). The problem is ziggy generated my app URL as http, not https, so when I try to use form and submit data, there is error saying Blocked loading mixed active content.

What I already tried and still not work:

• clear browser cache
• clear all laravel cache
• setting APP_URL to https
• restart Vite service
• rebuild the docker container

Strange thing is when I run this command php artisan ziggy:generate, the generated config show https. This is generated config:

const Ziggy = {"url":"https:\/\/app.local","port":null,"defaults":{},"routes":{"debugbar.openhandler":{"uri":"_debugbar\/open","methods":["GET","HEAD"]},"debugbar.clockwork":{"uri":"_debugbar\/clockwork\/{id}","methods":["GET","HEAD"],"parameters":["id"]},"debugbar.assets.css":{"uri":"_debugbar\/assets\/stylesheets","methods":["GET","HEAD"]},"debugbar.assets.js":{"uri":"_debugbar\/assets\/javascript","methods":["GET","HEAD"]},"debugbar.cache.delete":{"uri":"_debugbar\/cache\/{key}\/{tags?}","methods":["DELETE"],"parameters":["key","tags"]},"debugbar.queries.explain":{"uri":"_debugbar\/queries\/explain","methods":["POST"]},"register":{"uri":"register","methods":["GET","HEAD"]},"login":{"uri":"login","methods":["GET","HEAD"]},"password.request":{"uri":"forgot-password","methods":["GET","HEAD"]},"password.email":{"uri":"forgot-password","methods":["POST"]},"password.reset":{"uri":"reset-password\/{token}","methods":["GET","HEAD"],"parameters":["token"]},"password.store":{"uri":"reset-password","methods":["POST"]},"verification.notice":{"uri":"verify-email","methods":["GET","HEAD"]},"verification.verify":{"uri":"verify-email\/{id}\/{hash}","methods":["GET","HEAD"],"parameters":["id","hash"]},"verification.send":{"uri":"email\/verification-notification","methods":["POST"]},"password.confirm":{"uri":"confirm-password","methods":["GET","HEAD"]},"password.update":{"uri":"password","methods":["PUT"]},"logout":{"uri":"logout","methods":["POST"]},"index":{"uri":"\/","methods":["GET","HEAD"]},"dashboard":{"uri":"dashboard","methods":["GET","HEAD"]},"storage.local":{"uri":"storage\/{path}","methods":["GET","HEAD"],"wheres":{"path":".*"},"parameters":["path"]}}};
if (typeof window !== 'undefined' && typeof window.Ziggy !== 'undefined') {
  Object.assign(Ziggy.routes, window.Ziggy.routes);
}
export { Ziggy };

this is my app,js

import './bootstrap';
import '../css/app.css';

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { ZiggyVue } from '../../vendor/tightenco/ziggy';
import Antd from './antd';
import 'dayjs/locale/id';

const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
import { createPinia } from 'pinia';

const pinia = createPinia();
createInertiaApp({
  title: (title) => `${title} - App`,
  resolve: (name) => {
    const pages = import.meta.glob('./Pages/**/*.vue', { eager: true });
    let page = pages[`./Pages/${name}.vue`];
    page.default.layout = page.default.layout;

    return page;
  },
  setup({ el, App, props, plugin }) {
    const Vue = createApp({ render: () => h(App, props) })
      .use(plugin)
      .use(ZiggyVue)
      .use(Antd)
      .use(pinia)
      .mount(el);
    return Vue;
  },
  progress: {
    color: '#4B5563'
  }
});

Ziggy call and context

Login.vue
const submit = () => {
  form.post(route('login'), {
    onFinish: () => form.reset('password')
  });
};

Ziggy configuration

console.log(Ziggy);
{
  "url": "http://app.local",
  "port": null,
  "defaults": {},
  "routes": {
    "debugbar.openhandler": {
      "uri": "_debugbar/open",
      "methods": [
        "GET",
        "HEAD"
      ]
    },
    "debugbar.clockwork": {
      "uri": "_debugbar/clockwork/{id}",
      "methods": [
        "GET",
        "HEAD"
      ],
      "parameters": [
        "id"
      ]
    },
    "debugbar.assets.css": {
      "uri": "_debugbar/assets/stylesheets",
      "methods": [
        "GET",
        "HEAD"
      ]
    },
    "debugbar.assets.js": {
      "uri": "_debugbar/assets/javascript",
      "methods": [
        "GET",
        "HEAD"
      ]
    },
    "debugbar.cache.delete": {
      "uri": "_debugbar/cache/{key}/{tags?}",
      "methods": [
        "DELETE"
      ],
      "parameters": [
        "key",
        "tags"
      ]
    },
    "debugbar.queries.explain": {
      "uri": "_debugbar/queries/explain",
      "methods": [
        "POST"
      ]
    },
    "register": {
      "uri": "register",
      "methods": [
        "GET",
        "HEAD"
      ]
    },
    "login": {
      "uri": "login",
      "methods": [
        "GET",
        "HEAD"
      ]
    },
    "password.request": {
      "uri": "forgot-password",
      "methods": [
        "GET",
        "HEAD"
      ]
    },
    "password.email": {
      "uri": "forgot-password",
      "methods": [
        "POST"
      ]
    },
    "password.reset": {
      "uri": "reset-password/{token}",
      "methods": [
        "GET",
        "HEAD"
      ],
      "parameters": [
        "token"
      ]
    },
    "password.store": {
      "uri": "reset-password",
      "methods": [
        "POST"
      ]
    },
    "verification.notice": {
      "uri": "verify-email",
      "methods": [
        "GET",
        "HEAD"
      ]
    },
    "verification.verify": {
      "uri": "verify-email/{id}/{hash}",
      "methods": [
        "GET",
        "HEAD"
      ],
      "parameters": [
        "id",
        "hash"
      ]
    },
    "verification.send": {
      "uri": "email/verification-notification",
      "methods": [
        "POST"
      ]
    },
    "password.confirm": {
      "uri": "confirm-password",
      "methods": [
        "GET",
        "HEAD"
      ]
    },
    "password.update": {
      "uri": "password",
      "methods": [
        "PUT"
      ]
    },
    "logout": {
      "uri": "logout",
      "methods": [
        "POST"
      ]
    },
    "index": {
      "uri": "/",
      "methods": [
        "GET",
        "HEAD"
      ]
    },
    "dashboard": {
      "uri": "dashboard",
      "methods": [
        "GET",
        "HEAD"
      ]
    },
    "storage.local": {
      "uri": "storage/{path}",
      "methods": [
        "GET",
        "HEAD"
      ],
      "wheres": {
        "path": ".*"
      },
      "parameters": [
        "path"
      ]
    }
  }
}

Route definition

Route::middleware('guest')->group(function () {
    Route::get('login', [AuthenticatedSessionController::class, 'create'])
                ->name('login');
    Route::post('login', [AuthenticatedSessionController::class, 'store']);
});

[bakerkretzmar]

Are your app's trusted proxies configured correctly? See https://github.com/tighten/ziggy?tab=readme-ov-file#tlsssl-termination-and-trusted-proxies

[biladina]

ah, okay, I forgot to mention that I use nginx proxy.. after I configure trusted proxies, it work.. thank you..