Failed to load CSS in HTTPS protocol

Question

I created a blog using Laravel, and I am having a weird issue. I pushed my project to Heroku (nepshare.herokuapp.com). When I visit this URL my site loads but with no CSS and I refreshed every time to make it load but failed. Finally, I changed the https://nepshare.herokuapp.com URL to http://nepshare.herokuapp.com (changed from HTTPS to HTTP) then everything works just fine.css are only loaded in HTTP. How to render all CSS in HTTPS protocol? The following is my main layout code:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>

@include('inc.navbar')
<div class="container">
    @include('inc.messages')
    @yield('content')
</div>

<script src="/vendor/unisharp/laravel-ckeditor/ckeditor.js"></script>
<script>
    CKEDITOR.replace('article-ckeditor');
</script>
</body>
</html>

@BookOfZeus i have updated the post, as i have included css using that above process — Jasbin Karki
– Jasbin Karki, Commented Feb 17, 2019 at 5:06

Md.Sukel Ali · Accepted Answer · 2019-02-17 05:19:23Z

In your .env file define new property,

REDIRECT_HTTPS = true

In your app/Providers/AppServiceProvider.php add this,

namespace App\Providers;

use Illuminate\Routing\UrlGenerator;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot(UrlGenerator $url)
    {
        if(env('REDIRECT_HTTPS')) {
            $url->formatScheme('https');
        }
    }

    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        if(env('REDIRECT_HTTPS')) {
            $this->app['request']->server->set('HTTPS', true);
        }
    }
}

Now you can use,

<script src="{{ asset('js/app.js') }}" defer></script>

Or you can use secure_asset() helper function but secure_asset() method only use https: https://laravel.com/docs/5.1/helpers#method-secure-asset

when i tried 1st method my project failed to push in heroku idk why and i tried second method after reverting changes and everything works jst fine thankyou

Dalija Prasnikar · Accepted Answer · 2024-04-20 10:08:01Z

2

secure_asset()

The secure_asset function generates a URL for an asset using HTTPS.

$url = secure_asset('img/photo.jpg');

edited Apr 20, 2024 at 10:08

Dalija Prasnikar♦

28.7k46 gold badges96 silver badges179 bronze badges

answered Feb 17, 2019 at 5:18

user633440

Collectives™ on Stack Overflow

Failed to load CSS in HTTPS protocol

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related