This is the simplest React app I could come up with to test how proxy-server apps (in general) behave or misbehave within codesandbox.io and stackblitz sandboxes — specifically, proxy server apps that make graphql server calls to bypass an endpoint's CORS policies.
For my use case, this app performs one simple graphql query — to the Venia graphql endpoint https://venia.magento.com/graphql — when a button on the screen is clicked. The app uses a node-based express server to proxy the queries from the UI to Venia's endpoint. Using a server that runs on a different port from the local dev server, effectively bypasses the browser-based CORS policies.
To run the app locally:
- Clone the repo:
git clone git@github.com:commerce-docs/venia-proxy.git
- Change directories:
cd venia-proxy
- Run
yarn
to install dependencies. - Run
yarn dev
to start the project's proxy server and dev server.
You should see a single button at the top of the screen: Fetch Categories from Venia. Click it to fetch the product categories from the Venia graphql endpoint via the proxy server.
![image](https://private-user-images.githubusercontent.com/1828494/265094663-677e5c56-39d5-42ed-afc8-34bbef5456e9.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzg5OTQ0MDYsIm5iZiI6MTczODk5NDEwNiwicGF0aCI6Ii8xODI4NDk0LzI2NTA5NDY2My02NzdlNWM1Ni0zOWQ1LTQyZWQtYWZjOC0zNGJiZWY1NDU2ZTkucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MDIwOCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTAyMDhUMDU1NTA2WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MWM1NzFiMjRlMTkxZmRjOTJmNDkxNzJhZDU1OThmNjI5ZGQyOWEyNTFjNjE3ZWQ2ZjViMGYyZTk0MzAzY2NkZiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.vX0PrijHfKLwl2vuSVUHUp5Hq3LO1qxHHzoOSLtgWWU)