Heroku部署Laravue应用遇Mixed Content错误，求Vite修复方案

出现混合内容错误的核心原因是Vite在生产环境生成的资源URL使用了HTTP协议，而Heroku部署的站点强制使用HTTPS，浏览器会拦截不安全的HTTP资源请求。以下是具体修复步骤：

1. 设置正确的APP_URL环境变量 #

• 在Heroku控制台的「Settings」→「Config Vars」中添加或更新APP_URL，值为你的应用HTTPS地址，比如https://example.herokuapp.com
• 本地.env文件同步更新该配置，避免开发和生产环境资源路径不一致

2. 调整Vite配置生成HTTPS资源路径 #

修改项目根目录的vite.config.js，确保生产环境构建时使用HTTPS的资源前缀：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.js', 'resources/css/app.css'],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    build: {
        assetsPublicPath: process.env.APP_URL ? `${process.env.APP_URL}/build/` : '/build/',
    },
});

3. 配置Laravel信任Heroku代理 #

Heroku通过反向代理处理请求，Laravel需要识别代理传递的HTTPS协议信息。修改app/Http/Middleware/TrustProxies.php：

<?php

namespace App\Http\Middleware;

use Illuminate\Http\Middleware\TrustProxies as Middleware;
use Illuminate\Http\Request;

class TrustProxies extends Middleware
{
    protected $proxies = '*';
    protected $headers = Request::HEADER_X_FORWARDED_FOR | Request::HEADER_X_FORWARDED_HOST | Request::HEADER_X_FORWARDED_PORT | Request::HEADER_X_FORWARDED_PROTO;
}

4. 重新构建并部署 #

• 本地执行npm run build生成符合要求的生产资源
• 将代码提交到Heroku仓库，或触发Heroku的自动构建流程

完成以上步骤后，Vite生成的资源URL会自动使用HTTPS协议，混合内容错误即可解决。

内容的提问来源于stack exchange，提问作者LackFos