Mixed content jQuery ajax HTTPS request has been blocked on Laravel

Question

I think this question will be easy for someone and will be a face-palm situation for me.

I have a Laravel 5.3 site, and various pages have ajax requests. Because I use the csrf_field() feature, they work fine.

But there is one page where the ajax produces this error:

Mixed Content: The page at 'https://example.com/fb/reports' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://example.com/fb/json?levelType=&id=&aggLevel=ad&start=&end='. This request has been blocked; the content must be served over HTTPS.

My javascript looks like this:

    var relUrl = '/fb/json/';
    var payload = {
        levelType: levelType,
        id: id,
        aggLevel: aggLevel,
        start: start,
        end: end
    };
    console.log(relUrl);
    return $.ajax({
        type: 'GET',
        dataType: 'json',
        data: payload,
        url: relUrl,
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }            
    });

I've read tons of articles about this error. I've tried tons of suggested solutions, including changing the relative URL to the full https URL, or starting it with 2 slashes.

I've even tried changing the way my Laravel routes work and am now using just querystring parameters.

I've studied all of the articles below (and more).

Also, since this one ajax query is in a password-protect part of the site (and the ajax queries that work are in a public/open part of the site), I figured maybe that was related to the problem. But then I used SSH to log into the production server and vim to temporarily remove the line that required any authentication, and the https error still happens.

What steps can I take to debug further from here? What logs can I 'tail' on my Cloudways server?

Is there anything that Cloudflare might be interfering with (which I doubt, since other ajax queries work, all on https)?

Thanks!

• jQuery AJAX Request to HTTPS getting served to HTTP with Laravel and Select2
• This request has been blocked; the content must be served over HTTPS
• Mixed content issue - insecure XMLHttpRequest endpoint
• XHR response blocked by Chrome, because of mixed content issue (http/https)
• Forcing AJAX call to be HTTPS from HTTPS Page
• MixedContent when I'm loading https page through ajax, but browser still thinks it's http
• jQuery ajax won't make HTTPS requests
• Laravel 5.1 ajax url parameter is url

Answer 1

Summary: I needed to replace var relUrl = '/fb/json/'; with var relUrl = '/fb/json'; (remove the trailing slash) because that's what my Laravel web.php routes file expected.

---

In Chrome console, I noticed that the https XHR request was being "canceled" and replaced with an http request.

So then I used ssh to log into the remote production server and vim to temporarily disable the requirement of authentication.

Then in the Chrome console, I defined and ran a new ajax command using an absolute https URL with querystring params on the end. That worked (no mixed content error). Then I tried a relative URL like that, and it worked too.

Even a relative URL with no payload or querystring params or trailing slash worked.

Then I added the trailing slash again, and it didn't work.

I still wish there had been an easier way to trace or debug the redirect paths or whatever was happening. I still feel like I stumbled onto the answer clumsily (after many hours) instead of knowing how to dissect this problem reliably.