Mixed content error (Laravel - Vue)

Hi, guys. i´m moving app into production. Everything works fine when i´m using blade templates, but when i use vue components i´m getting an error "mixed content", axios is calling route api´s using http instead of https, aws block these petitions.

i tried some things but nothing works for me.

in env:

APP_ENV=production
APP_URL=https://my-website.com.mx

In app/Providers/AppServiceProvider.php

  if(config('app.env') === 'production') {
                \URL::forceScheme('https');
        }

I have also tried editing default axios baseUrl and adding a meta tag in main layout, but i´m being redirected to the main route, example: https://my-website.com.mx uses blade templates, it works fine, but the admin panel https://my-website.com.mx/user uses vuejs, when i´m using meta tag or baseURL, i get redirected to the main page (/),

window.axios.defaults.baseURL = 'https://www.my-website.com.mx';

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

drewdan

4 years ago

Level 15

How are you getting the routes to use in your axios requests?

1 like

FernandoProa

4 years ago

Level 1

@drewdan iḿ using my routes like this in VueJs


                url = '/api/cities/'+ this.address.city_id + '/locations';
        
                axios.get(url)
                .then(response => {...}

in api.php


Route::group([
    'middleware' => ['auth:api']
], function() {
    Route::get('cities','Api\CitiesController@index');
....
}

drewdan

4 years ago

Level 15

Does it make any difference if you were to hard code the base URL in the URL variable and do it that way? Is this production website online somewhere, so I can have a look at it?

FernandoProa

4 years ago

Level 1

@drewdan if i use:

window.axios.defaults.baseURL = 'https://www.my-website.com.mx';

i get redirected to my main page (/), for some reason haha the website is currently offline due to this error :(

drewdan

4 years ago

Level 15

I wonder if this is an Auth issue. This is behind an API route, with the auth middleware, so how are you authenticating the requests?

FernandoProa

4 years ago

Level 1

@drewdan in auth middleware

class Authenticate extends Middleware
{
    /**
     * @var array
     */
    protected $guards = [];

    public function handle($request, Closure $next, ...$guards)
    {
        $this->guards = $guards;

        return parent::handle($request, $next, ...$guards);
    }

protected function redirectTo($request)
    {
        if (!$request->expectsJson()) {
            if (array_first($this->guards) === 'admin') {
                return route('admin.login');
            }
            return route('login');
        }else{
                return response()->json(['message' => 'No logueado'], 401);
        }
    }
}

drewdan

4 years ago

Best Answer

Level 15

If you make a request to that endpoint using something like postman, setting it as a json request, do you get the response you expect?

1 like

FernandoProa

4 years ago

Level 1

@drewdan thank you bro, i spend hours trying to solve this problem, and thanks to you I was able to find it. I used postman in different api routes, some of them worked well, but I found that some of them had an extra slash at the end. so i changed from:

'/api/cities/'

to:

'/api/cities'

and it worked!!!!

*p.s: sorry, i´m working to improve my english haha xd

Please or to participate in this conversation.