The page was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint

Question

I am calling a rest API from Https deployed Application to Http Rest API. I have written the logic in JavaScript by using Angular Js framework. The web service call got failed with the below message.

The page at 'https://********someurl****' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint

Requesting if any one can help me get out of this error.

Answer 1

Workaround:

1- Click the shield icon in the far right of the address bar.

Allow mixed content in Google Chrome

2- In the pop-up window, click "Load anyway" or "Load unsafe script".

If you want to set your Chrome browser to ALWAYS(in all webpages) allow mixed content:

1- Close Chrome. Chrome must be fully closed before the next steps.

2- Right-click the Google Chrome desktop icon (or Start Menu link). Select Properties.

3- At the end of the existing information in the Target field, add: " --allow-running-insecure-content" (There is a space before the first dash.)

4- Click OK.

5- Open Chrome and try to launch the content that was blocked earlier. It should work now.

This is just workaround and you need to solve by securing both app and rest api.

Answer 2

Use an https endpoint for your Rest API, otherwise you will end up with mixed content

• HTTPS is important to protect both your site and your users from attack.
• Mixed content degrades the security and user experience of your HTTPS site.

Answer 3

If you are unable to switch to https, another solution is to set up a server side end point which you access via https, which then makes the call to the http url and returns the result. In other words, making your own little HTTPS proxy to the http resource