How to query API from within HTTPS encrypted ReactJS page?

Question

In an effort to move a web platform to HTTPS, I ran into a problem. Here is the setup that I am using:

Python Flask-based http server is served by gunicorn
Nginx directs SSL-encrypted HTTPS traffic to the http server
The http server serves a ReactJS page
Independent Python Flask-based API server is served by gunicorn

Now I am making PUT and GET requests from the ReactJS page into the API server. Because the ReactJS page is proxied via HTTPS, of course any request is fully encrypted. Thus, the API server receives encrypted requests.

My question is, how can I query an API server from within an HTTPS ReactJS page?

score 1 · Accepted Answer · answered Sep 02 '18 at 19:38

1

If I got it right question is "how to override browser security that blocks me from sending requests by http:// from within page hosted at https://".

The answer is: no way to do that.

If it is not possible to enable SSL for API server you may use your own server act as secure proxy. So finally it'd look like ReactJS -> HTTPS -> your server -> HTTP -> API server

UPD similar case sending request from https to http from chrome extension (spoiler: no workarounds available)

answered Sep 02 '18 at 19:38

skyboyer

22,209
7
57
64

Thank you @skyboyer for the fast response. I will try the solution you propose, ie. querying from ReactJS back to my own HTTPS page and submit queries server-side. – Simon Brunner Sep 02 '18 at 19:47
Thank you very much, this solution has actually just solved my issue! – Simon Brunner Sep 02 '18 at 20:09

How to query API from within HTTPS encrypted ReactJS page?

1 Answers1