Asp.net core cloudflare ssl Blocked Mixed content using unobtrusive-ajax

Question

I have recently set up a website that uses cloudflare free ssl. When using ajax calls for pagination I get a mixed content error, I assume because it's still at some point transmitted over http!? I tried using the instructions for https redirect here: https://learn.microsoft.com/en-us/aspnet/core/security/enforcing-ssl but that just ended up in a loop, giving the too many redirects error.

This is the specific error relating to mixed content:

Mixed Content: The page at 'https://www.andysmobilearchery.co.uk/events/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://www.andysmobilearchery.co.uk/events/index/?page=2&x-requested-with=xmlhttprequest&=1502287619453'. This request has been blocked; the content must be served over HTTPS.

Is there a fix for this, or am I going to have to remove the ajax functions?

Any help is appreciated!

@if (Model.Pager.EndPage > 1)
{
    <ul class="pagination">
        @if (Model.Pager.CurrentPage > 1)
        {
            <li>
                <a asp-controller="Events" asp-action="_Index" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#paged-content" asp-route-page="1" data-ajax-method="GET" asp-route-dfrom="@ViewBag.dfrom" asp-route-dto="@ViewBag.dto" asp-route-search="@ViewBag.search">First</a>
            </li>
                <li>
                    <a asp-controller="Events" asp-action="_Index" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#paged-content" data-ajax-method="GET" asp-route-page="@(Model.Pager.CurrentPage - 1)" asp-route-dfrom="@ViewBag.dfrom" asp-route-dto="@ViewBag.dto" asp-route-search="@ViewBag.search">Previous</a>
                </li>
        }

        @for (var page = Model.Pager.StartPage; page <= Model.Pager.EndPage; page++)
        {
            <li class="@(page == Model.Pager.CurrentPage ? "active" : "")">
                <a asp-controller="Events"asp-action="_Index" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#paged-content" data-ajax-method="GET" asp-route-page="@page" asp-route-dfrom="@ViewBag.dfrom" asp-route-dto="@ViewBag.dto" asp-route-search="@ViewBag.search">@page</a>
            </li>}

        @if (Model.Pager.CurrentPage < Model.Pager.TotalPages)
        {
            <li>
                <a asp-controller="Events" asp-action="_Index" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#paged-content" data-ajax-method="GET" asp-route-page="@(Model.Pager.CurrentPage + 1)" asp-route-dfrom="@ViewBag.dfrom" asp-route-dto="@ViewBag.dto" asp-route-search="@ViewBag.search">Next</a>
            </li>
                <li>
                    <a asp-controller="Events" asp-action="_Index" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#paged-content" data-ajax-method="GET" asp-route-page="@(Model.Pager.TotalPages)" asp-route-dfrom="@ViewBag.dfrom" asp-route-dto="@ViewBag.dto" asp-route-search="@ViewBag.search">Last</a>
                </li>
        }
    </ul>
}

I have now noticed that other sites where I have this implemented work just fine (3 others!), I am using asp.net boilerplate which adds a trailing slash to urls, if I disable this the events page works, but my reviews page stops... I am baffled lol

Answer 1

So I found the answer, kind of.

In my app I had the routing option to add the trailing slash:

    .AddRouting(
        options =>
        {
                // Improve SEO by stopping duplicate URL's due to case differences or trailing slashes.
                // See http://googlewebmastercentral.blogspot.co.uk/2010/04/to-slash-or-not-to-slash.html
                // All generated URL's should append a trailing slash.
                options.AppendTrailingSlash = true;
                // All generated URL's should be lower-case.
                options.LowercaseUrls = true;
        })

I found that disabling this worked, however I wasn't content given that this issue doesn't arise on my other sites. In the end I copied the startup.cs from a working site, which has fixed the issue, the only difference that I can find is that the broken site uses a partial class for startup and in the files which make up the rest of the start up the only difference was a cors method, I have no need for cors so I don't know why it was there, still that shouldn't have broken it. It's going to have to remain a mystery for a while since I have it working. What I am going to do is re-contsruct the app bit by bit at a later date; if I remember I'll update here with any findings.