Mixed Content: The page at 'domain' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint

Question

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:

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.

can you show the code where you make this request? http ://strong-moebel.art/admin/gallerie — Paul Tsai, Jun 12 '22 at 10:20
@PaulTsai I've updated my question with the requested information — Artur Müller Romanov, Jun 12 '22 at 11:21
Have you tried this one: form.post('/admin/gallerie') without the ending slash — Paul Tsai, Jun 12 '22 at 14:00
@PaulTsai My god, I can't believe it. This seems to the problem. All my requests have the trailing `/` and only this one throws the error (only in production). It's working now. Thanks alot. — Artur Müller Romanov, Jun 12 '22 at 14:21

Artur Müller Romanov · Accepted Answer · 2022-09-15T10:21:20.917

4

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

edited Sep 15 '22 at 10:21

answered Jun 12 '22 at 14:25

Artur Müller Romanov

4,417
10
73
132

score 4 · Answer 2 · answered Feb 06 '23 at 05:03

I encountered this error and tried almost all the suggestions above but nothing worked. I however came across a medium post that suggested adding the following meta tag and it worked for me.

<head>
 <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
</head>

So you basically need to add that meta tag in the head tag of your main layout file if you are using Laravel. For more information, read this post

score 1 · Answer 3 · answered Jan 01 '23 at 09:56

1

Add these lines in the boot function in AppServiceProvider

URL::forceRootUrl(Config::get('app.url'));
    if (str_contains(Config::get('app.url'), 'https://')) {
        URL::forceScheme('https');
    }

answered Jan 01 '23 at 09:56

Ayman Elshehawy

2,746
23
21

This saves my day. Thanks! – Marsad Akbar Jun 15 '23 at 21:42

NERDGHOST · Answer 4 · 2023-01-03T14:15:10.740

0

On Laravel 9, edit /app/Helpers/helper.php

$protocol = strtolower(substr($_SERVER["SERVER_PROTOCOL"],0,5))=='https://'?'https://':'http://';

To

$protocol = strtolower(substr($_SERVER["SERVER_PROTOCOL"],0,5))=='https://';

Under the myAssetSRC Function.

Kind of dirty but only thing that worked for me.

edited Jan 03 '23 at 14:15

answered Jan 03 '23 at 14:13

NERDGHOST

11
2

score 0 · Answer 5 · answered Jul 30 '23 at 09:25

0

If you are using nginx reverse proxy, and you can edit the config file, simply add this directive to force the upgrade to HTTPS

add_header 'Content-Security-Policy' 'upgrade-insecure-requests';

answered Jul 30 '23 at 09:25

BoCyrill

1,219
16
17

Mixed Content: The page at 'domain' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint

Update:

5 Answers5