如何修复此请求已被阻止；内容必须通过 HTTPS 提供

Question

我刚刚在 heroku 上部署了一个应用程序，但它没有按预期呈现。检查控制台后，我收到以下错误。我该如何解决这个问题？

Mixed Content: The page at 'https://photography-web-by-alphy.herokuapp.com/' was loaded over HTTPS, but requested an insecure stylesheet 'http://photography-web-by-alphy.herokuapp.com/css/style.css'. This request has been blocked; the content must be served over HTTPS.

Answer 1

当您的文档以HTTPS方式提供时，其他资源也必须以HTTPS方式调用，例如css、js图片等。

因此，只需尝试使用 https://... 导入该 css 即可解决问题。

Answer 2

1. 我使用了安全资产助手功能。 <link rel="stylesheet" href="{{ secure_asset('css/style.css') }}">

2. 我将 .env 文件中的 APP_URL 从 http 更新为 https。然后在 heroku 上的配置变量中，我将 KEY 添加到 APP_URL 和我提供的值与 .env 中的 APP_URL 的值相同，然后重新部署了应用程序，现在它可以正常工作，没有错误！

Answer 3

不要使用资产，然后就不会强制使用协议

<link rel="stylesheet" href="/css/style.css">

或者，最好配置您的受信任代理设置以检测所需的协议。

https://laravel.com/docs/8.x/requests#configuring-trusted-proxies

Answer 4

要在 Laravel 中强制使用 HTTPS，您应该在 App\Providers\AppServiceProvider 中添加：

    /**
     * Bootstrap any application services.
     */
    public function boot()
    {
        if (!App::environment([
            'local',
            'testing',
        ])) {
            URL::forceScheme('https');
        }
    }