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!

score 18 · Accepted Answer · answered Jan 31 '17 at 03:38

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.

Yes. See my first line. Removing the trailing slash fixed it. That's why this is the accepted answer. Good luck. — Ryan, Feb 20 '18 at 17:43
Thanks. We ended up solving it. It was removing the trailing slash, but Apache was also doing something to add a slash, so in our case, it was slightly more insane. — dgo, Feb 20 '18 at 23:23

score 0 · Answer 2 · answered Feb 07 '22 at 07:45

When changing from HTTP to HTTPS, it's possible to get the problem Mixed content issue - Content must be served as HTTPS.

So, first, modify APP_URL in the .env file, if we use the assets helper, this shouldn't give any problem with the URL.

APP_URL=https://url.net

Finally, add the following to the beginning of **api.php** or **web.php**:

if (App::environment('production')) {
    URL::forceScheme('https');
}

Mixed content jQuery ajax HTTPS request has been blocked on Laravel

2 Answers2