Search code examples
javascriptphplaravelenvironment-variableslaravel-valet

Laravel environment variable in vue component

I'm having a problem getting the correct value for an environment variable I have set. I am working on a localhost with valet. This specific domain is configure for ssl (valet secure), and the URL I am on also shows the certificate and correct URL.

I have the following in my .env file:

APP_URL=https://pad.eppo
MIX_APP_URL=${APP_URL}

I then call on this in my Vue component:

console.log("Environment URL: " + process.env.MIX_APP_URL);

Expected result:

https://pad.eppo

Result:

http://pad.eppo

There is no cache or cookies involved. Both have been cleared to double check. I have recompiled using npm run watch, since this is necessary when changing the variables. I am out of ideas as to why this problem exists. It is a big problem since my axios requests give errors on this.

Any help is much appreciated.

Solution

  • Force HTTPS in your Laravel application:

    URL::forceScheme('https');

    Add this line at the begin of your web.php file. In that way ${APP_URL} will be returned with HTTPS protocol.

    Also ensure your config is not cached - run:

    php artisan config:clear