laravel - 混合内容 : The page at 'domain' was loaded over HTTPS, 但请求了不安全的 XMLHttpRequest 端点

Question

我一直在尝试解决仅在生产中发生的错误。当我尝试 create一个新的数据库条目，抛出以下错误:

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)

其他一切正常，包括 edit条目的方法。我正在使用 resource controller . create方法使用惯性的 form.post和 edit方法使用它的 form.put (如果这是相关的)。
我一直在尝试使用以下提供的解决方案进行调试:

Mixed content issue- Content must be served as HTTPS

Mixed Content (laravel)

基本上人们说要补充:

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

到 boot()你的方法 AppServiceProvider.php .我已经这样做了，但错误仍然存​​在。我想知道这是否是一个惯性问题。
在服务器上，我尝试过:

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

但似乎没有什么能解决这个问题。我的虚拟主机是 cloudways，我正在使用他们的 Let's Encrypt SSL Certificate .我也尝试删除证书并查看会发生什么，但即便如此，也会发生完全相同的错误。我对 SSL 的教育程度不高并且想知道是否有人可以帮助我解决问题或指出我可以调查的事情。
我正在使用 vite建生产建。
更新 :
通过 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>

然后由 inertia 路由到后端-> 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']);
});

并发送至 resource controller通过:

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

在 Controller 内部，调用此方法将请求数据存储在数据库中:

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);
}

问题似乎发生在前端，因为没有 logs创建的。

Answer 1

感谢@PaulTsai，它现在可以工作了。我不得不改变:

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

至:

form.post('/admin/gallerie')