Laravel 7+Vue2网站突发Mixed Content错误致空白页求助

问题描述 #

我的Laravel 7 + Vue2网站已正常运行一年，今早突然出现空白页，控制台报错：Mixed Content: 页面通过HTTPS加载，但请求了不安全的http://mywebsite.com/js/app.js脚本，该请求已被拦截。 所有服务器请求均为HTTPS，axios也配置了HTTPS请求，但在线工具检测到app.js通过HTTP加载，寻求解决方案。

相关配置文件如下：

app.js

import { ENV } from "./environment";

window.Vue = require("vue");
import router from "./routes.js";
import { BootstrapVue, IconsPlugin } from "bootstrap-vue";

import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
Vue.use(BootstrapVue);

Vue.use(IconsPlugin);

require("./bootstrap");
require("./store/subscriber");

Vue.component("pagination", require("laravel-vue-pagination"));
import "nouislider/distribute/nouislider.min.css";

import store from "./store";

Vue.component("app", require("./components/App.vue").default);

import axios from "axios";

axios.defaults.baseURL = ENV.baseUrl;

store.dispatch("auth/attempt", localStorage.getItem("token")).then(() => {
    const app = new Vue({
        el: "#app",
        router,
        store
    });
});

environment.js

export const ENV = {
    baseUrl: 'https://mywebsite.com/api/mov',
    isProduction: true,
}

webpack.mix.js

const mix = require("laravel-mix");

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js("resources/js/app.js", "public/js").sass(
    "resources/sass/app.scss",
    "public/css"
);

mix.browserSync(process.env.APP_URL);

.env

APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:HujNYbiNsz..........=
APP_DEBUG=true
APP_URL=https://mywebsite.com

LOG_CHANNEL=stack

DB_CONNECTION=db_connection
DB_HOST=127.0.0.1
DB_PORT=db_port
DB_DATABASE=db_name
DB_USERNAME=db_username
DB_PASSWORD=db_password


BROADCAST_DRIVER=pusher
CACHE_DRIVER=file
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_MAILER=smtp
MAIL_HOST=smtp_host
MAIL_PORT=smtp_port
MAIL_USERNAME=username
MAIL_PASSWORD=password
MAIL_ENCRYPTION=ssl
MAIL_FROM_ADDRESS=sender_name
MAIL_FROM_NAME="Laravel"

解决方案 #

1. 检查页面模板的资源引用

打开加载页面的blade模板文件（通常为resources/views/layouts/app.blade.php或同类文件），找到引入app.js的script标签：

• 避免硬编码HTTP协议链接，改用Laravel辅助函数生成HTTPS兼容路径：

  <script src="{{ asset('js/app.js') }}"></script>
  <!-- 或强制指定HTTPS -->
  <script src="{{ secure_asset('js/app.js') }}"></script>
  

2. 清除Laravel配置缓存

即使.env中APP_URL已设为HTTPS，Laravel可能缓存了旧配置，执行以下命令清空缓存：

php artisan config:clear
php artisan route:clear
php artisan view:clear

3. 重新编译前端资源

若之前用HTTP环境编译过资源，Mix会生成HTTP路径的资源引用，重新编译生产环境资源：

npm run prod

编译完成后检查public/mix-manifest.json，确认app.js路径为相对路径或HTTPS绝对路径。

4. 清除CDN/反向代理缓存

若网站使用CDN（如Cloudflare）或反向代理，登录对应平台清空所有缓存，确保最新的资源引用被分发。

5. 强制刷新浏览器缓存

用户端按Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac）强制刷新页面，清除本地缓存的旧页面内容。

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