[discourse] React app fetching failure with default configs

[markphelps]

Originally posted by dstrohschein-equips on Discourse

Hello, I am brand new to Flipt and am trying it out on my local machine before trying to deploy it into the engineering environment. I am running flipt in a docker container using the image shown in the documentation.

I made a brand new react app and am using the client sdk for react as shown in the documentation. In fact, I copied and pasted the code.

I created a test boolean flag with the key flag1, and am trying to get that to evaluate in the react client code. However, when the code loads and executes, the container output says

ERROR Failed to extract ServerMetadata from context {“server”: “grpc”, “system”: “grpc”, “grpc_log”: true}

And the client SDK reports “Failed to Fetch”.

All configurations are default - I didn’t tweak any of the settings for this test. What am I doing wrong?? I’ve read through the docs, and I haven’t found any case that would explain what I am lacking here.

Thank you so much for your help, I am looking forward to getting this up and running for my team.

[dosubot[bot]]

The “Failed to Fetch” error from the React client SDK usually points to a network or configuration issue between your React app and the Flipt server. Since you’re running Flipt in Docker with default configs, the most common cause is that your React app can’t reach the Flipt API endpoint—often due to Docker networking or incorrect API URLs.

The server log “Failed to extract ServerMetadata from context” suggests a gRPC communication problem, but this is likely a symptom of the failed client connection rather than the root cause.

Here are some things to check:

• Make sure your React app is configured to use the correct Flipt API URL. If you’re running the app outside Docker, try using localhost and the mapped port (e.g., http://localhost:8080), not 127.0.0.1 inside the container.
• If your React app runs in a different Docker container, use Docker networking (e.g., the container name as the hostname).
• Confirm that the Flipt server is running and accessible from your browser or with curl (e.g., curl http://localhost:8080/healthz).
• If you’re using the Flipt client SDK, consider setting the error strategy to fallback to handle network hiccups more gracefully, as suggested in this discussion.

If you’re still stuck, please share the exact API URL your React app is using and how you’re running both the app and Flipt (e.g., both on host, both in Docker, or mixed). That will help narrow down the networking issue.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}   

[markphelps]

Reply from mark on Discourse:

Hi @dstrohschein-equips

Im wondering if it could be a CORS issue.

Are you running your react app in Docker as well alongside Flipt in Docker (via docker compose)? Or are you running Flipt in Docker and your React app locally?

Would you be able to create an example repo that shows the problem on GitHub perchance? This would help us greatly in reproducing and fixing the issue.

Thank you!!

[markphelps]

Reply from dstrohschein-equips on Discourse:

Hi Mark,

YES! This is exactly what it was. I had to add the commands to turn on CORS and set the origins appropriately in the docker run command. Once I did that, everything started working. Thank you!