Axios Vue.js throwing Cors error on Heroku Laravel application - laravel

I've got a Laravel app that's hosted on Heroku, currently in staging environment that's password protected. It's accessible via https:// but axios is making requests to http:// and causing a cors error... I've tried adding allow origin headers as middleware on the routes but that doesn't fix the error.
Is there a way to force axios to use https by default? I don't want to pass the full URL to the axios.get()
This doesn't happen on local so could it be something caused by Heroku?

There is a Pull Request on the way that will try to access http/s if the other protocol fails. So it's a matter of time now.

I think the issue is actually related to Heroku but I can't be certain.
The only thing that tells me this is that I moved to an EC2 instance via Laravel Forge and I don't have any problems.
Strangely I also had a couple of files that were being requested without www. And when viewing in browser it forced the css files to the naked domain. What's weird though is other css files loaded with www. And weren't redirected so I think it could also have been a permissions thing.
I solved the file issue by simply changing the file name and the redirect stopped so maybe an overzealous redirect. Either way it was annoying and I think I tried everything so hopefully that information helps somebody else in future.
Cheers

Related

Laravel SPA (laravel + vuejs + sanctum) deployed in subdomain returns wrong api

I have this problem since several days.
I'm developing a Vuejs/laravel app, using Sanctum as an authenticator. where laravel mainly have the api gestion role, and I've started to deploying it. On Local, everything looks fine, api and auth are working.
On deploy, since my app is binded to be in a subdomain (laravelapp.maindomain with folder path of domain/laravelapp), when i try to access any page (vue-router) instead of domain/laravelapp/login i get domain/login, even if the page itself is looking fine.
If i try to reload the redirected page (domain/page) i have a 404. Also, since every API is pointing to domain/api/link instead of domain/laravelapp/api/link, everything is broken starting with auth.
I've tried modifying .env file, RouteServiceProvider, .htaccess(but i have no knowledge about that).
I also tried to set the subdomain Document Root to domain/laravelapp (it's the first thing i've done), but not only it dosn't work, if I try to print on screen subdomain's root, it returns domain. It's becoming a real issue right now, thank you for any help.
EDIT: I've discovered something. in the main domain there is a Joomla application. The api route contains the Joomla redirect (like, there is a plugin oh the site that changes language automatically, appending /en /it /de given the chosen language). So, in my case, the api is domain/index.php/en/subdomain. I tried again being more specific with document root, with no results, and playing around with .htaccess, but with no success.

Using one Laravel app from different domains - building urls issue

I searched for my issue in so many ways, but I don't seem to find the correct case, so I'm asking here.
I have a Laravel app which is installed on a server and everything works correct. The domain is set as HTTP only and is configured from AWS. However we need to have another domain which should work only from HTTPS. The HTTP domain is pointing to the server instance and the HTTPS one is pointing to a CloudFront distribution with origin the HTTP domain. The issue is that when I open the HTTPS domain, all of the links and images are loaded from the HTTP domain.
To be more concrete, let's say I have http://mysite-notsecure.example.com and https://mysite-secure.example.com.
When I open http://mysite-notsecure.example.com everything works as it should and there are no issues. However when I open https://mysite-secure.example.com the site loads, also files like app.js and app.css load with the correct host, but things like fonts, images, links, etc, load from http://mysite-notsecure.example.com.
Because most of the urls are built with the url() function, I think the issue has something to do with APP_URL, which was first set to http://mysite-notsecure.example.com, but when I added the new domain, I set it to empty (APP_URL=),
however the urls are still built the same way (I cleared config cache).
What should I do in order for my site to build the urls according to the current host?
I don't need any other change for the two domains. They should load everything exactly the same, only the host should remain and not redirect to the other domain.
It turned out there were two different issues.
I'll describe them here, because there is a slight chance someone could be dealing with one of them.
First, I printed the contents of the $_SERVER variable on both domains and the host in both was the same - the HTTP domain.
This issue was from the CloudFront configuration. Turned out the Host header was removed from the CF distribution behavior, so that CF replaced it with the origin's value (the origin is the http domain). After this was fixed, the host in $_SERVER appeared correctly.
But the initial issue for the urls building was something else which I didn't think of. After clearing the cache to remove the debugging and seeing the right urls on the HTTPS domain, I switched back to the HTTP one and saw now there all the urls pointed to the HTTPS domain. That is when it hit me that these domains share not only the configuration, but also the cache. And most of my urls on the page I was testing with, were coming from a function with cache, so when the cache was stored from one of the domains, they appeared the same on the other. When I included the host in the cache key, everything worked correctly.
Hope this helps someone else.
goto file .env and setup the APP_URL=https://mysite-secure.example.com/ and change
href={{asset('folder-path')}} in layout or blades file

Laravel & axios install on other subdomain CORS issue

[Laravel 8, vue 2, axios]
I have a vue app installed on app.subdomain.domain.com and the laravel backend on subdomain.domain.com. All working fine.
I created another parallel install, on app.subdomain2.domain.com and laravel on subdomain2.domain.com, and i keep getting CORS issues even though i am using same vue frontend and same laravel backend.
I installed the backend using the same repo, git pull (there is only one branch), and deployed the same js files. I even made some changes to test and pushed to both installs and first one is still working fine, second is not.
Axios from what i see is good, backend is just not adding the 'Access-Control-Allow-Origin' header.
Tried configuring the cors, added both subdomains on the trusted array, nothing works.
Second install done by doing a git checkout and then composer install.
Am i doing something wrong ?! Going nuts here.
PS laravel install came with \Fruitcake\Cors\HandleCors::class
LATER EDIT: on second install, axios does not add any authorization header (it sets it after login, but on install 1 it sends authorization blank, on install 2 doesn't send it at all) -- not sure if this can be an issue or not...
UPDATE: Looking closer on the requests, the OPTIONS has cors headers... the POST request following up the options has not... what the hell
I would say as a first thing to check, see if the APP_URL in the .env file is set to the correct subdomain. Laravel uses this path in various places, and perhaps you're still using the one from the old application which could cause the CORS problem.

Why am I getting broken access to layouts.app (for lavravel app) on heroku hosting but not on localhost?

I am a student and have created my first Laravel App (A blog app). I have a layout/master view created named app.blade.php in resources/views/layouts folder.
I am using laravel 5.6.
It works perfectly on localhost but not on heroku hosting.
Here is my project structure
Here is my code in home.blade.php
Heroku hosting error screen below
Localhost view
clueless about this problem. I need your support.
EDIT
I solved the problem. I am on a windows system while hosting on a linux platform. So my sweet innocent windows was not updating the "Layouts" on server with "layouts".
But I am with another problem
Regards,
Arpan
but loading /login /register correctly
Now this doesn't end here,
when I type /login with the url it gives me
Now I observe that when i click the link it shows me Not secure connection and displays properly but when typing there is https but not displayed correctly.
Please help me analyse and figure out the issue.
Github repo link : https://github.com/ArpanKIIT2017/blog4b/
Its because the app was unable to find the file. But everything looks good. can you check if the file exists on remote server.
what are you using to push the files to remote server?.
try running
php artisan view:clear
on both local and heroku
Actually Heroku doesn't support SSL in free tier. So https actually won't work.
Finnaly migrated my app to postgre sql.
Problem mainly was due to the uppercase and lowercase representation of "Layouts".
So my app is Up and Running only with one problem that is heroku doesn't support file uploads. It is not storing any file upload. Searching solution for that but not related to this post.
Thank You

Angular UI-Router (1.x) Change Host Url

I have a requirement from a client to change the web site Url to a subdomain when they enter the checkout section of the site we are developing for them. For example from www.mysite.com to checkout.mysite.com. We are using UI-Router in HTML5 mode and would like to have the router change the Url to the subdomain instead of going to www.mysite.com/checkout. Does anyone know a way that this can be accomplished? I've also tried using pushState but without success. All of the subdomain suggestions I've tried have not worked. Honestly even if I just put a "fake" url that would work fine too. Changing the Url is more of a visual thing instead of actually redirecting to a subdomain.
After much review I found that this cannot be done because it is a security issue; even switching to a subdomain (which is what I was trying to do) is not allowed.

Resources