ngrok HTTPS运行异常，无法正常测试Mollie支付API webhook

我正在为自己的网站接入mollie api以实现支付功能，该流程需要配置跳转URL和用于更新支付状态的webhook回调URL。目前网站尚在本地开发阶段，显然无法直接使用localhost作为回调地址，因此我安装了ngrok，运行ngrok http命令后使用其分配的HTTPS URL进行测试。

使用HTTP链接访问站点时一切正常，但通过HTTPS链接访问时，自定义CSS脚本无法加载，Chrome还提示网站不安全。我确认我的SSL证书有效，猜测不安全提示是证书为自签名证书导致的？

我还是尝试在加载异常的HTTPS站点上下单测试API，确认订单后收到419错误响应（我的网站基于Laravel 8开发）。

我对网络相关知识了解较少，不知道从哪里排查问题，如果遗漏了关键信息还请指出。

补充的问题细节 #

控制器代码 #

public function order(CreateOrderRequest $request){
    $baseUrl = 'https://xxxx-xxx-xx-xxx-xx.ngrok.io/';
    $payment = $this->mollie->payments->create([
        "amount" => [
            "currency" => "EUR",
            "value" => "10.00"
        ],
        "description" => "My first API payment",
        "redirectUrl" => $baseUrl."/order/besteld",
        "webhookUrl"  => $baseUrl."/order/betaalupdate/".$id,
    ]);
    dd($payment);
    return redirect()->to($payment->getCheckoutUrl(), 303);
}

路由配置 #

Route::post('/winkelwagen/bestellen/bevestig', [CartController::class, 'order'])->name('orderConfirmed');

前端提交表单代码 #

<form action="{{route('orderConfirmed')}}" method="post" class="d-block">
            @csrf
            <div class="row">

                <div class="col-12 col-lg-6">
                    <h4 class="fat-title display-4 text-center mt20 text-white"><span class="text-color-light">AFLEVER</span>ADRESS</h4>
                    <hr class="hrdark mb40 mt40">

                    <div class="row">
                        <div class="col-12 col-md-6 mb20">
                            <label for="naam" class="fat-title">Volledige Naam</label>
                            <input id="naam" type="text" class="form-control" placeholder="Mary Fuego" name="naam"
                                   @if($user != null) value="{{$user->naam}}" @endif  required>

                        </div>
                        <div class="col-12 col-md-6 mb20">
                            <label for="email" class="fat-title">Email</label>
                            <input id="email" type="email" class="form-control" placeholder="Example@fuego.nl" name="email"
                                   @if($user != null) value="{{$user->email}}" @endif required>
                        </div>
                        <div class="col-12 col-md-6 mb20">
                            <label for="tel" class="fat-title">Telefoonnummer</label>
                            <input id="tel" type="tel" class="form-control" placeholder="0612345678" name="tel">
                        </div>
                        <div class="col-12 col-md-6 mb20">
                            <label for="plaats" class="fat-title">Plaats</label>
                            <input id="plaats" class="form-control" type="text" placeholder="Holten" name="plaats" required>
                        </div>

                        <div class="col-6 col-md-3 mb20">
                            <label for="postcode" class="fat-title">Postcode</label>
                            <input id="postcode" class="form-control" type="text" minlength="4" maxlength="6" placeholder="7451PJ" name="postcode" required>
                        </div>
                        <div class="col-6 col-md-3 mb20">
                            <label for="huisnummer" class="fat-title">Huisnummer</label>
                            <input id="huisnummer" class="form-control" type="text" placeholder="1" min="1" name="huisnummer" required>
                        </div>

                        <div class="col-6 col-md-3 mb20">
                            <label for="toevoeging" class="fat-title">Toev. (opt.)</label>
                            <input id="toevoeging" class="form-control" type="text" placeholder="A" min="1" name="toevoeging">
                        </div>
                        <div class="col-6 col-md-3 mb20">
                            <label for="straat" class="fat-title">Straat</label>
                            <input id="straat" class="form-control" type="text" placeholder="Handelsweg" name="straat" required>
                        </div>

                        @if($user != null)
                            <div class="col-12 mb20">
                                <button class="btn darkgraybg text-white w-100 btn-widetxt"
                                        data-bs-toggle="dropdown" aria-expanded="false" type="button">laad adress</button>

                                <div class="dropdown-menu softgreybg pb20 pt20 pr20 pl20">
                                    <label for="addresscopy" class="fat-title">Adress</label>
                                    <select class="form-select form-control" id="addresscopy" onchange="loadAdress(parseInt(this.value))">
                                        <option value="0">Geen Adress Laden</option>
                                        @foreach($addresses as $address)
                                            <option value="{{$address->id}}">{{$address->plaats}} {{$address->straat}} {{$address->huisnummer}} {{$address->toevoeging}}</option>
                                        @endforeach
                                    </select>
                                </div>

                            </div>

                            <input type="hidden" name="user_id" value="{{$user->id}}">
                        @endif

                    </div>
                </div>

                <div class="col-12 col-lg-6">
                    <h4 class="fat-title display-4 text-center mt20 text-white"><span class="text-color-light">BETAAL</span>METHODE</h4>
                    <hr class="hrdark mb40 mt40">

                    <button type="submit" class="btn btn-orange btn-widetxt w-100">
                        BESTELLEN
                    </button>
                </div>

            </div>
        </form>

问题现象 #

在HTTPS页面提交该表单会返回无日志记录的419 PAGE EXPIRED错误，在HTTP页面提交则会触发Mollie客户端要求使用SSL的报错。

解决方案 #

• 修复混合内容与不安全提示：该问题是HTTPS页面加载了HTTP协议的静态资源导致。先将.env文件中的APP_URL参数修改为当前ngrok分配的HTTPS地址，再在app/Providers/AppServiceProvider.php的boot方法中添加代码\URL::forceScheme('https');，强制Laravel生成的所有链接（静态资源、路由等）都使用HTTPS协议，即可解决CSS加载失败和不安全提示问题。
• 修复419 CSRF校验失败错误：419错误的核心原因是Laravel没有识别到ngrok的代理请求，无法正确判定当前请求为HTTPS，导致会话Cookie读取异常，CSRF令牌校验失败。修改config/trustedproxy.php配置，将proxies参数设置为'*'（仅本地开发使用，生产环境需修改为指定代理IP），让Laravel信任ngrok的代理请求，正确获取请求协议。修改配置后执行php artisan config:clear、php artisan cache:clear清除缓存即可。
• 完成上述配置后，站点所有请求均走HTTPS协议，不会再触发Mollie的SSL校验报错，webhook和跳转地址也可正常使用。

内容的提问来源于stack exchange，提问作者S. Scholte