Laravel+Inertia生产HTTPS下POST请求混合内容报错排查

问题表现 #

仅生产环境调用create方法新建数据库条目时，浏览器抛出两类错误，其余功能（包括条目编辑edit接口）运行正常：

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)

项目基于resource controller实现资源路由，create方法调用Inertia的form.post发起请求，edit方法调用form.put发起请求。

已尝试操作 #

• 在AppServiceProvider.php的boot()方法中添加强制HTTPS配置：

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

  配置后报错未消失。
• 多次调整.env文件的APP_URL参数，尝试过以下配置组合，均未解决问题：

  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主机的SSL配置，先后使用平台提供的Let's Encrypt证书、移除证书测试，报错完全一致。生产环境前端资源通过Vite构建。

相关代码片段 #

前端提交组件 #

<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>

路由配置 #

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

控制器store方法 #

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

目前后端无相关报错日志，初步判断问题出在前端请求环节。

根因定位 #

问题由两个配置缺陷共同导致：

1. 前端POST请求路径末尾多余斜杠触发框架重定向：代码中写的请求地址是/admin/gallerie/，末尾带斜杠，但Laravel资源路由生成的store接口标准地址是/admin/gallerie，无末尾斜杠。POST请求访问带斜杠的地址时，Laravel会直接返回301重定向到无斜杠的标准地址。
2. 框架未正确识别反向代理的HTTPS协议：Cloudways主机采用Nginx前置做SSL终止，转发给后端服务的请求是HTTP协议，未配置可信代理的情况下，Laravel会判定当前请求为HTTP请求，301重定向的目标地址会使用HTTP协议，直接触发浏览器混合内容拦截，请求未到达业务逻辑，因此后端无日志。
   edit功能正常是因为编辑类请求的路径为/admin/gallerie/{id}格式，不存在末尾多余斜杠，不会触发重定向。

修复步骤 #

1. 修正前端请求路径，去掉末尾斜杠：将storeRecord方法中的form.post('/admin/gallerie/')改为form.post('/admin/gallerie')，从源头避免重定向。
2. 配置可信代理，让框架正确识别HTTPS请求：打开app/Http/Middleware/TrustProxies.php，将$proxies属性设置为*：

   protected $proxies = '*';
   

3. 替换控制器中的硬编码跳转逻辑，改用路由方法生成地址，避免硬编码导致的协议错误：将store方法中的return redirect($this->BASE_URL);改为return redirect()->route('gallerie.index');
4. 清除配置缓存，确保之前修改的强制HTTPS、环境变量配置生效：

   php artisan config:clear
   php artisan route:clear
   php artisan cache:clear
   

修改后在浏览器开发者工具网络面板验证，确认请求地址为HTTPS协议、无301重定向，即可正常提交创建条目。

内容的提问来源于stack exchange，提问作者Artur Müller Romanov