I have a rest service (implemented as an Azure Function), running on HTTPS, on domain A.

I have a web site, running on HTTPS on domain B.

I have specified wildcard * for cors.

Using jQuery on the web site I send Ajax requests to the rest service. This works, I can see my GET request preflighted by an OPTIONS.

When I am developing my rest service I would like to host the service locally, running on HTTP, on the localhost domain. This doesnt seem to work.

I have to enable mixed content, but then it doesnt seem like the browser (Firefox) sends or preflights my request - the network traffic is empty. It looks like my request is failing the CORS request.

This appears in the Firefox console.

16:42:56.550 Loading mixed (insecure) active content "http://locahost:7071/api/test/get?message=get+hello+world!" on a secure page[Learn More] ajax.ts:153:23
16:42:56.558 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://locahost:7071/api/test/get?message=get+hello+world!. (Reason: CORS request did not succeed).

I am able to avoid the mixed content errors by setting my local url as //locahost, however this still fails CORS.

Does this happen because I am trying to do CORS from HTTPS domain to HTTP localhost?

I have a rest service (implemented as an Azure Function), running on HTTPS, on domain A.

I have a web site, running on HTTPS on domain B.

I have specified wildcard * for cors.

Using jQuery on the web site I send Ajax requests to the rest service. This works, I can see my GET request preflighted by an OPTIONS.

When I am developing my rest service I would like to host the service locally, running on HTTP, on the localhost domain. This doesnt seem to work.

I have to enable mixed content, but then it doesnt seem like the browser (Firefox) sends or preflights my request - the network traffic is empty. It looks like my request is failing the CORS request.

This appears in the Firefox console.

16:42:56.550 Loading mixed (insecure) active content "http://locahost:7071/api/test/get?message=get+hello+world!" on a secure page[Learn More] ajax.ts:153:23
16:42:56.558 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://locahost:7071/api/test/get?message=get+hello+world!. (Reason: CORS request did not succeed).

I am able to avoid the mixed content errors by setting my local url as //locahost, however this still fails CORS.

Does this happen because I am trying to do CORS from HTTPS domain to HTTP localhost?

• javascript
• ajax
• rest
• cors
• azure-functions

Share Improve this question Follow edited Jul 10, 2018 at 20:16 James Wood asked Jul 10, 2018 at 15:44 James WoodJames Wood 17.6k77 gold badges4949 silver badges9494 bronze badges 6

• If you are hard coding the http:// into your url for the ajax, try changing it to just //. If you perform an ajax request starting with // it will use whatever protocol the page used when it first loaded. This way you can avoid doing a different protocol than what the page is. – Taplar Commented Jul 10, 2018 at 15:48
• Do you have the property "CORS": "*" inside of your local.settings.json file? – Mark C. Commented Jul 10, 2018 at 15:51
• @MarkC. Yes, I've also tried supplying --cors * as an application argument. – James Wood Commented Jul 10, 2018 at 15:57
• @Taplar, nice idea, however similiar result. The browser preflights a request to https://, which my service doesnt respond to, so CORS still fails. – James Wood Commented Jul 10, 2018 at 16:03
• it may still fail the CORS, but that should fix your mixed active content error. – Taplar Commented Jul 10, 2018 at 16:08

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 2

this page shows details reason: Mixed content is blocked as default. https://developer.mozilla/en-US/docs/Web/Security/Mixed_content/How_to_fix_website_with_mixed_content

you have to enable local https as well if you did not setup allowed domain list, not only Firefox, but also Chrome & IE block those request that is from https to http. BTW, you cannot use self-assigned certificates in local host, it will be blocked as well with another error.

Done a bit of digging, as far as I can tell there are a few things ing into play here.

CORS

HTTPS domain to HTTP localhost rightly causes CORS validation. I believe I have CORS correctly configured for my service.

However I believe the browsers have particular behaviours when dealing with localhost, which are causing my issue.

Tests

I am using Rest test test on HTTPS and a locally hosted JSON Server on HTTP to run tests outside of my rest service (Azure Functions).

I am paring those tests to the HTTPS hosted version of JSON Server at JSONPlaceholder.

I am doing two types of test, simple and preflighted as they elicit different behaviours. Preflighted has a custom header, which results in an OPTIONS request before the GET.

Browser Behaviours on Localhost with Protection Disabled

TL/DR: Simple and preflighted requests do not work on Firefox or Chrome.

Firefox

To allow mixed content (HTTP in HTTPS) protection must be disabled, otherwise nothing happens and Blocked loading mixed active content errors are shown in the console.

However even with protection disabled Firefox will continue to block simple and preflighted requests. For the preflighted requests Firefox will not issue any request what so ever. Warnings regarding mixed content and CORS are shown in the console.

Chrome

Like Firefox protection must be disabled to allow mixed content.

Also like Firefox, Chrome will not successfully perform any request, however it will issue the preflight OPTIONS.

Browser Behaviours on 127.0.0.1 with Protection Enabled

TL/DR: In Chrome simple and preflighted requests work. For Firefox only simple requests work.

It looks like there has been some work at Firefox and Chrome so http://127.0.0.1/ isn't treated as mixed content. Looks like the crowd at WebKit/Safari are still thinking about it.

The MDN docs have this note.

Since Firefox 55, the loading of mixed content is allowed on http://127.0.0.1/ (see bug 903966). Chrome allows mixed content on http://127.0.0.1/ and http://localhost/. Safari does not allow any mixed content.

Based on the tests above I'm not sure that localhost on Chrome is true (at least anymore).

Firefox

With protection enabled, Firefox works for simple requests. Preflighted requests still fail but only show CORS warnings (this might be a bug in Firefox, I'm not sure).

Chrome

With protection enabled, simple and preflighted requests work.

Azure Function

Coming back to my rest service implemented as Azure Functions. I thought I could just test my service over 127.0.0.1 using Chrome.

Unfortunealty, this won't work either.

Azure Functions are hardcoded to localhost and don't seem to respond to 127.0.0.1. E.g. I can't even browse to my API on 127.0.0.1 let alone make a web service call.

An alternative approach is required, I went with trying to setup up Azure Functions for HTTPS. How to run Azure Function locally within Visual Studio on HTTPS?