question

BoopathyElango-7282 avatar image
0 Votes"
BoopathyElango-7282 asked ·

Deploy Node application in App Services (Windows)

Hi Team,

We have an Angular 6 frontend app running in node js server and finally deployed in Azure App services (Windows). This app is trying to access backend HTTP REST API.
However App services content served in HTTPS site, we were not able to make a HTTP call to our backend microservice.

We encounter below issue , it says the content must be served over HTTPS. Could you kindly assist on how to make a backend HTTP call from angular app.

Error: "Mixed Content: The page at <<site_name>> was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint <<backend url>>. This request has been blocked; the content must be served over HTTPS

azure-webapps
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

ryanchill avatar image
0 Votes"
ryanchill answered ·

If you don't own the backend REST API service, one suggestion is a Logic App. You can create a logic app as a wrapper for the REST API that can forward request from your front end to your API return the response. Another option is creating a reverse proxy in your node application.

· 2 ·
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi Ryan,

Thank you so much for your answer. I am in discuss with team to explore it.
Moreover backend REST api call (Spring boot app) is also developed by us and its running in App Service (Linux).

We are planning to introduce reverse proxy (NgINX) between Front end app and Backend API.

  1. Frontend app will send HTTPS call to NgINX

  2. NgINX to Backend API call is through HTTP call

  3. Back response from NgINX to Frondend is again via HTTPS call.

Please validate this above steps theoretically. We are in implementing the same.

7527-reverseproxy.jpg
Thanks,
Elango Boopathy.


0 Votes 0 ·
reverseproxy.jpg (47.2 KiB)

Hi Ryan,

Where should we place the reverse-proxy server ? Whether can we run this in a separate azure app service accepts HTTPS request ?

Thanks,
Elango Boopathy

0 Votes 0 ·
StevePadmore-1044 avatar image
0 Votes"
StevePadmore-1044 answered ·

Hi @BoopathyElango-7282 ,

this is likely caused by you loading a page of your site in the browser using HTTPS (secure), then a link (or some ajax call) on the page attempting to load content using HTTP (not secure). This is prevented to stop accidental loading of unsecured content into a page that was loaded using SSL.

The best way to remedy this is to configure your API to use SSL (if not already doing so), then use HTTPS for the call to the API.

Cheers.

· 1 ·
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi Steve,

Thanks for your response, We got it why we are getting secured content is not serve using HTTP.
So planning to introduce Reverse proxy to mitigate this issue.

Lets keep you posted on same.

Thanks,
Elango Boopathy.

0 Votes 0 ·