jquerywebservermixed-contentlaravel-paginationjquery-jscroll

jQuery requesting HTTP request instead of HTTPS and the request is blocked due to mixed-content


I have my site build on Laravel and using onscroll pagination at frontend with JScroll JavaScript plugin.

I have properly setup my server and it is automatically redirecting to HTTPS. And when I access my site through my IP address on https, the pagination works perfectly without any issue but when I point my domain to the IP address the pagination is not working and requesting paginated URL on HTTP protocol due to which the request is getting blocked by browser due to mixed content.

My site is using Cloudflare as CDN and for DNS resolver. I have also enabled HTTPS on Cloudflare and automatic https redirect through Cloudflare. But still I am getting the same error.

I think it JScroll and jQuery that are causing the issue.

JScroll plugin link : https://github.com/pklauzinski/jscroll

Infinite Scroll pagination working through this below code:

<script type="text/javascript">
    $('ul.pagination').hide();
    $(function() {
        $('.scrolling-pagination').jscroll({
            autoTrigger: true,
            padding: 20,
            nextSelector: '.pagination li.active + li a',
            contentSelector: 'div.scrolling-pagination',
            callback: function() {
                $('ul.pagination').remove();
            }
        });
    });
</script>

Here is the console error:

Mixed Content: The page at 'https://example.com/posts/all' was loaded over HTTPS, 
but requested an insecure XMLHttpRequest endpoint 'http://example.com/posts/all?page=3'. 
@ jquery.min.js:4  
This request has been blocked; the content must be served over HTTPS. 
send    @   jquery.min.js:4 
ajax    @   jquery.min.js:4 
n.fn.load   @   jquery.min.js:4 
(anonymous) @   jquery.jscroll.min.js:1 
d.complete  @   jquery.min.js:3 
i   @   jquery.min.js:2 
add @   jquery.min.js:2 
_a  @   jquery.min.js:3 
g   @   jquery.min.js:3 
dequeue @   jquery.min.js:3 
(anonymous) @   jquery.min.js:3 
each    @   jquery.min.js:2

How can I resolve this issue?

Update

I found the issue but not able to resolve it. Actually, when content loads through AJAX request the returned rendered HTML data do not contain HTTPS pagination URL. I am using this code to return html response on AJAX call

$html = view('ajaxData', ['data' => $data, 'filtersArray' => $filtersArray])->render(); 
echo $html;

And in Blade file I am using this code to generate pagination content:

{{ $data->appends($filtersArray)->links() }}

Solution

  • I found the solution and the issue has been resolved.

    In the Laravel AppServiceProvider AppServiceProvider::boot method, I added the following code to force HTTPS on everything, including pagination links.

    if($this->app->environment('production')) {    
       $this->app['request']->server->set('HTTPS','on'); 
    }