Mixed Content: the content must be served over https

error

Mixed Content: The page at 'https://site/home#/training/17/100' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://site/api/training/section/submit'. This request has been blocked; the content must be served over HTTPS.

AppServiceProvider

use Illuminate\Support\Facades\URL;

class AppServiceProvider extends ServiceProvider
{
    
    public function boot()
    {
       
        if (App::environment('production', 'local'))
        { 
           
       
            URL::forceScheme('https');
          
        }   

        // make forumChannels available with every view
        view()->share('channels', Channels::get());
    }

and I am posting from the vue form

submit() {
                this.errors = {};
                axios.post('/api/training/section/submit/', {
                    fields: this.fields,
                    product: this.product,
                    quiz: this.quiz
                })

though this code working fine perfectly on my local but through a mixed content https error on Production

simian

6 years ago

Level 6

Well, the forceScheme('https'); says it all, your Axios is probably still posting to the http instead of the https endpoints. Your API backend doesn't allow that, therefore giving you that error.

Cronix

6 years ago

Level 67

put the scheme in the url of the ajax call.

axios.post('https://yoursite.com/api/training/section/submit/', {

forceScheme() will only work on the php/laravel side for links created using asset/url helpers.

rameezisrar

6 years ago

Level 18

@cronix I have tried that too with https on axios.post but I am still getting the same error

rameezisrar

6 years ago

Best Answer

Level 18

@cronix

 axios.post('//sitename/api/training/section/submit', {
                    fields: this.fields,
                    product: this.product,
                    quiz: this.quiz
                })

Please or to participate in this conversation.