How to fetch an outside API in React through HTTP on GCP App Engine

Question

I am hosting an Ubuntu VM running apache2 on GCP cloud compute. I have an FQDN/domain name I can hit from my browser to give me data I need for my react app.

My react app is hosted on GCP app engine. I did not want to pay for/deal with SSL certs, so I'm trying to reach both endpoints with just http. When I locally host my react app, it connects via https and is unable to retrieve data from an "insecure" source via http.

When I try to load the React app in gcloud app engine and connect via http, it refuses to load the request to my API because it is from an outside resource. I've attempted to set up a proxy to the api with http-middleware. But I have had issues with that as well.

The app is a simple checkers game, and the api is made to return a move for the enemy player. Here is the line where the api is called:

fetch('http://ai.checkers-bot.com/bot/?board=' + api_load + '&player=Bb')
        .then(res => console.log(res))
        .catch(console.log);

I've researched the topic as much as I can, but every solution seems to be a situation where you are running a backend node service, and proxy through that to a locally ran api. I need to hit my own api, on a different domain via http.

Thomas Ruble · Accepted Answer · 2020-02-07 20:19:40Z

1

You will need to fetch() from an HTTPS endpoint.

The problem is your browser's policy on mixed content. (Note that this issue is not related to React, Apache, GCP, or CORS. It's about HTTP web security)

Possible solutions, in order of least effort:

Use an HTTPS Load Balancer in front of your GCE VM to handle SSL. Google Cloud Platform makes this easy enough to set up. Here's a tutorial.
Port all your code to App Engine and get rid of the Apache service. That way your web app will make requests to its own domain over HTTPS.
If you don't want to port code to App Engine, have your web app fetch to App Engine, and have App Engine proxy requests to your GCE VM.

answered Feb 7, 2020 at 20:19

Thomas Ruble

9622 gold badges8 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lee Hughs Over a year ago

Thanks for the suggestions. Ended up getting rid of the apache service for now. Still working on making the deployment actually run on one instance on separate ports, but that should be less of an issue.

Collectives™ on Stack Overflow

How to fetch an outside API in React through HTTP on GCP App Engine

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related