What could be the reason for the CORS failure when making requests from an HTTPS domain to an HTTP localhost

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

My website is also running securely on HTTPS but on domain B.

I've set the CORS to use a wildcard *.

Using jQuery on my website, I send Ajax requests to the rest service which works fine. I can see my GET request being preflighted by an OPTIONS.

https://i.sstatic.net/kYv8B.png

During development of my rest service, I want to run it locally using HTTP on the localhost domain. Unfortunately, this setup seems to cause issues.

When I enable mixed content to allow for this, the browser (Firefox) does not appear to send or preflight my request - there is no network activity. It seems like my request is failing due to CORS issues.

The following error message 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).

To bypass the mixed content errors, I tried setting my local URL as //localhost, but this still doesn't resolve the CORS issue.

Could the problem be that I am attempting to do CORS from an HTTPS domain to an HTTP localhost?

javascriptajaxrestcorsazure-functions

Answer №1

This page explains why Mixed content is blocked by default. Visit this link for more information

In order to fix mixed content issues, it is necessary to enable local https if allowed domain list is not set up. Browsers like Firefox, Chrome, and IE block requests from https to http. Additionally, self-assigned certificates cannot be used on localhost as they will also be blocked with an error.

Answer №2

After conducting some research, it seems that several factors are contributing to the issue at hand.

CORS

The use of an HTTPS domain in connection with HTTP localhost is triggering CORS validation. While I believe my service has CORS properly configured, there seem to be specific browser behaviors related to dealing with localhost causing the problem.

Tests

For testing purposes, I am utilizing Rest test test on HTTPS and a locally hosted JSON Server on HTTP to run tests outside of my Azure Functions-based rest service. The comparison is being made against the HTTPS-hosted version of JSON Server available at JSONPlaceholder.

Two types of tests are being performed - simple and preflighted, each demonstrating different behaviors. Preflighted requests involve a custom header, resulting in an initial OPTIONS request before the actual GET request.

https://i.sstatic.net/n19TP.png

Browser Behaviours on Localhost with Protection Disabled

TL/DR: Firefox and Chrome do not support both simple and preflighted requests.

Firefox

Disabling protection is necessary in Firefox to allow mixed content (HTTP within HTTPS) or else the console displays 

Blocked loading mixed active content
errors without any actions taken.

https://i.sstatic.net/55NCW.png

Even with protection disabled, Firefox continues to block simple and preflighted requests. In the case of preflighted requests, Firefox does not initiate any request at all, displaying warnings concerning mixed content and CORS in the console.

https://i.sstatic.net/8F9Jq.png

Chrome

Similar to Firefox, disabling protection in Chrome allows mixed content. However, Chrome does not successfully complete any requests but does execute the preflight OPTIONS request.

https://i.sstatic.net/zqZ4X.png

https://i.sstatic.net/OUXlK.png

Browser Behaviours on 127.0.0.1 with Protection Enabled

TL/DR: Simple and preflighted requests work in Chrome, but only simple requests work in Firefox.

An improvement regarding how Chrome and Firefox handle requests from appears to have been implemented, while WebKit/Safari is still contemplating the matter.

MDN documentation includes a note explaining these changes.

According to my tests, it is unclear whether the behavior towards localhost in Chrome remains consistent.

Firefox

Under protection, Firefox supports simple requests, but preflighted requests continue to fail with CORS warnings possibly indicating a bug in Firefox.

https://i.sstatic.net/yU5mO.png

Chrome

Enabling protection allows both simple and preflighted requests to function as expected in Chrome.

https://i.sstatic.net/yU9Qu.png

Azure Function

Returning to my Azure Functions-based rest service, attempting to test the service over 127.0.0.1 using Chrome proved unsuccessful.

It seems that Azure Functions are hardcoded for localhost and do not respond appropriately to requests made to 127.0.0.1. Even accessing the API through 127.0.0.1 is not possible.

An alternate solution involves setting up Azure Functions for HTTPS, as described here: How to run Azure Function locally within Visual Studio on HTTPS?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Eliminate a specified range of characters from a string using JavaScript

I am currently working on a JavaScript function that will remove specific characters from a string. I have tried various methods such as `string.slice()`, `string.substr()`, and `string.substring()`, but what I really need to do is remove everything before ...

javascriptstringfunction

Loading pages dynamically with jQuery's AJAX functionality

$("#page").ajaxStart(function(){ $("#loading").show(); }); $('#page').load('target.html', function() { $("#loading").hide(); } I currently use this AJAX method to load my target page, however, it only loads scripts and not all ...

jqueryajax

Compatibility with IE9: Using jQuery to send an AJAX POST request

I'm currently facing an issue with making a POST request from my website to a server that is not on the same domain. The functionality is working seamlessly on Chrome, Firefox, and IE10+, but I need to ensure it works on IE9 as well. Below is the cod ...

javascriptjqueryajaxinternet-explorerinternet-explorer-9

Change the DER encoded ANS.1 format of an AWS KMS ECDSA_SHA_256 Signature to JWT base64url encoded R || S format using NodeJS/Javascript

I am currently working on generating a JWT Signature in NodeJS using the ES256 algorithm and AWS KMS Customer Managed Keys. However, I have encountered an issue where the signature created by AWS KMS with ECDSA_SHA_256 cryptographic Signing Algorithms is ...

javascriptnode.jsjwtamazon-kms

What could be causing my unique Angular custom date filter to output nonsensical results?

This is the Jade markup: .col-md-9 | {{client.person.date_of_birth | date:'standardDate'}} Here's the filter in Angular: .filter('standardDate', function($filter){ var dateFilter = $filter('date'); ...

javascriptangularjs

Ways to ensure the title changer works seamlessly for everyone

Having a title changer for elements visible in the viewport is crucial. However, the current setup only works for a single division and fails to function with multiple divisions. Click Here for Live Testing and Viewing Check out the jsFiddle for Code V ...

javascriptjqueryhtml

Utilizing d3.js to filter a dataset based on dropdown selection

I am working with a data set that contains country names as key attributes. When I select a country from a dropdown menu, I want to subset the dataset to display only values related to the selected country. However, my current code is only outputting [obje ...

javascriptjqueryjsond3.js

Leveraging AJAX for seamless PHP execution without page refresh

I have this HTML form: <form class="clearfix" method="POST"> <input name="username" type="text" placeholder="Username:"> <input name="password" type="password" placeholder="Password:"> <textarea name="comment" placeholder="Comment: ...

phphtmlajaxformspost

How can I bind the ID property of a child component from a parent component in Angular 2 using @Input?

I have a unique requirement in my parent component where I need to generate a child component with a distinct ID, and then pass this ID into the child component. The purpose of passing the unique ID is for the child component to use it within its template. ...

javascriptangularinputtypescriptoutput

Detect both single and double click events on a single Vue component with precision

I did some online research but couldn't find a clear answer. However, I came across this article -> Since I didn't quite understand the solution provided, I decided to come up with my own inspired by it. detectClick() { this.clickCount += ...

javascriptvue.jsvuejs2vuetify.js

Guide to extracting HTML content from an AJAX call?

I am currently attempting to extract a value from an HTML form. This involves making a GET request to a specific URL, retrieving the HTML content, and then utilizing jQuery to parse through it. Below is the snippet of HTML that I need to navigate through: ...

javascriptjqueryhtmlajax

Dividing a pair of CSS stylesheets on a single HTML page

Currently, I am working on a HTML page that includes multiple javascripts and css files in the header section. <link href="@Url.Content("~/Content/css/main.css")" rel="stylesheet" type="text/css" /> In order to make the website mobile-friendly, I s ...

javascriptjqueryhtmlcss

Upon refreshing, the user of the React JS application is redirected to a different page

My React JS app utilizes react-router-dom v6 to manage the routes. Everything was working fine until I integrated Firebase Firestore. Now, when I reload the seeker page, it redirects me to the home page instead of staying on the seeker page. This issue is ...

javascriptreactjsfirebasereact-routerrefresh

Mastering the syntax of Babel in Node.js

Hey there! I've encountered a syntax issue while migrating to babel. The problem lies in importing an unnamed module. In traditional Node.js default import, it's possible to import without specifying the module name and passing in the app. Howeve ...

javascriptnode.jsexpresssyntax-errorbabeljs

TypeScript Implementation of ES6 Arrow Functions

Just diving into Typescript, I'm struggling to figure out the solution. I tried researching and looked into destructuring, but still unable to make it work. import React from "react"; import { StyleSheet, Text, View } from "react-native"; const st ...

javascriptreactjstypescriptreact-native

Learn how to display HTML content in trNgGrid using the $sce.trustAsHtml method

I am currently working with a table that has search options implemented using trNgGrid.js. The data for this table comes from a Sharepoint list where one of the columns contains HTML content that I need to display. To achieve this, I attempted using $sce. ...

javascriptjqueryhtmlangularjs

Struggling with my jQuery Ajax call, need some help

I am attempting to create an ajax request that will update the content of my select element. Below is the code for my request : $(function() { $("#client").change(function() { type: 'GET', url: "jsonContacts. ...

javascriptjqueryajaxforms

Managing JSON data retrieval and manipulation techniques

My code is set up to display the image, title, and summary for all entries in a JSON file. However, I only want to display the image, title, and summary for the first entry, and only show the title for the rest of the entries. Please advise. <html> ...

javascriptjqueryhtmlajaxjson

Learn how to create an animated refreshing icon in React when clicked

I have a refresh icon in my React app that utilizes Material UI. I want the icon to spin for a second after it is clicked, but I am unsure of how to achieve this. Despite attempting some solutions, none have been successful. const useStyles = makeStyles(( ...

javascriptcssreactjsmaterial-ui

Displaying an external webpage within a Backbone application

Is it feasible to display an external webpage in a view by using its URL? I am working with Backbone and Handlebars. var AuthorizeInstagramView = Backbone.View.extend({ template: Handlebars.compile(template), initialize: function () { }, ...

javascriptbackbone.jshandlebars.js