I've been trying to resolve an error that happens only in production. When I try to create a new database entry, following errors are thrown:

Mixed Content: The page at 'https://strong-moebel.art/admin/gallerie/neu' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://strong-moebel.art/admin/gallerie'. This request has been blocked; the content must be served over HTTPS.

Uncaught (in promise) Error: Network Error
    at wh (main.750d1ea1.js:4:96980)
    at s.onerror (main.750d1ea1.js:5:1837)

everything else works, including the edit method of the entries. I'm using a resource controller. create method uses inertia's form.post and edit method uses its form.put (if that's relevant).

I've been trying to debug this with the solutions provided in:

1. Mixed content issue- Content must be served as HTTPS
2. Mixed Content (laravel)

basically people are saying to add:

if (App::environment('production')) {
    URL::forceScheme('https');
}

to the boot() method of your AppServiceProvider.php. I've done so but the error still occurs. I'm wondering if this is an inertia issue.

On the server, I've tried:

APP_ENV=production
APP_URL=http://localhost
APP_URL=https://localhost
APP_URL=
APP_URL=http://strong-moebel.art
APP_URL=https://strong-moebel.art

but nothing seems to solve the issue. My webhost is cloudways and I'm using their Let's Encrypt SSL Certificate. I've also tried to remove the certificate and see what happens but even then the exact same error occurs. I'm not very educated on SSL and was wondering if someone could help me resolve the issue or point to something I could investigate.

I'm using vite to build production built.

Update:

The component from which the request is sent via form.post:

<template layout="backend/cms-layout">
  <div id="cms-gallery-create" class="cms-gallery-create">
    <form @submit.prevent="storeRecord" method="post" enctype="multipart/form-data">
      <div class="title-btn-bar">
        <h1>Erstelle eine Kreation:</h1>
        <input type="submit" class="btn" value="Kreation speichern">
      </div>
      <p>Titel:</p>
      <input class="textfield-closed title-field" v-model="form.title">
      <p>Titelbild:</p>
      <cms-img-upload v-model:image="form.image"/>
      <p>Hauptteil:</p>
      <cms-custom-editor v-model="form.body"/>
    </form>
    <div v-if="errors.target" class="error">{{ errors.target }}</div>
  </div>
</template>


<script setup>
import CmsImgUpload from '../../components/backend/cms-img-upload.vue'
import CmsCustomEditor from '../../components/backend/cms-custom-editor.vue'
import {useForm} from "@inertiajs/inertia-vue3";

const props = defineProps({
    errors: Object
})

const form = useForm({
    title: '',
    body: '',
    image: '',
})

const storeRecord = () => {
    form.post('/admin/gallerie/')
}

</script>

it is then routed by inertia to the backend -> web.php:

Route::middleware('auth')->group(function() {
    Route::inertia('/admin/dashboard', 'backend/cms-dashboard');

    Route::post('/admin/gallerie/move', [GalleryController::class, 'moveRow']);
    Route::resource('/admin/gallerie', GalleryController::class);

    Route::post('/admin/verkauf/move', [ShopController::class, 'moveRow']);
    Route::resource('/admin/verkauf', ShopController::class);

    Route::post('/admin/logout', [LoginController::class, 'destroy']);
});

and sent to a resource controller via:

Route::resource('/admin/gallerie', GalleryController::class);

Inside the controller, this method is called to store the request data inside the database:

public function store(Request $request)
{
    if ($request->image) {
        $image_path = Custom::storeBase64Image($this->STORAGE_PATH, $request);
    } else {
        $image_path = null;
    }

    Gallery::create([
        'title' => $request->title,
        'body' => $request->body,
        'image_path' => $image_path
    ]);

    return redirect($this->BASE_URL);
}

The problem seems to happen in the frontend, since there are no logs created.

Thanks to @PaulTsai it works now. I had to change:

form.post('/admin/gallerie/')

to:

form.post('/admin/gallerie')

Edit:

I've just experienced exactly the same issue but with the fetch api, this time with paypal. In production I had to change:

fetch('/api/paypal/order/create/', ...

to:

fetch('/api/paypal/order/create', ...

Maybe it helps someone