Laravel XHR Requests Blocked

Question

I'm a DevOps Engineer and I am not an expert in Laravel and web development.

Recently we decided to refactor our monolith app which is on one server. The new requirement is to deploy the app on an EKS cluster.

I created the cluster and deployed the same source code to EKS cluster. In front of the cluster, there is an ALB with redirect rule from http to https.

The app seemed to work well with https, but I found some pages broken because there are some XHR requests blocked due to mixed-content issue. These requests are served by http not https but the other resources and requests served by https.

The error:

jquery.js:9837 Mixed Content: The page at 'https://testapp.com/dashboard/branch/bookings' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://testapp.com/dashboard/branch/bookings/get_bookings?draw=1&columns...'. This request has been blocked; the content must be served over HTTPS.

I ensured that the APP_URL in the .env file is using https.

note: the app is working well on one server.

note: we are using cloudflare as a proxy with SSL certificate.

What could be the reason of that?

UPDATE: As a testing scenario, I put an ALB in front of the app which deployed on one server -which is work well-. but when I changed the domain in CloudFlare to point to the ALB URL I faced the same issue. Thus, the problem is related to ALB. Are there any custom configurations in Amazon ALB or CloudFlare to address that?

Answer 1

Laravels determines wether or not request is done by http or https on the request by default if it can't figure it out any other way.

You must setup the TrustProxies middleware to make Laravel properly understand the request is forwarded. But you probably already have this setup.

CORS issues are very normal when you split your application up in multiple domains and you should look into setting up the proper HTTP headers: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Also watch out that when using HTTP caching these CORS headers are also cached if you don't use the HTTP CACH VARY header on origin.