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 [email protected]: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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkxMjg5NTIsIm5iZiI6MTczOTEyODY1MiwicGF0aCI6Ii8xODI4NDk0LzI2NTA5NDY2My02NzdlNWM1Ni0zOWQ1LTQyZWQtYWZjOC0zNGJiZWY1NDU2ZTkucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MDIwOSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTAyMDlUMTkxNzMyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ODJmM2FmZmJkNGQ2ZDMzODExZGViMDY0N2RjY2FhM2NhOGQ3YjhjMjFlNzc1YmZlNTYwOWQyMWE1MWFiMWJiMiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.VYISZDFzIpMLDPvb4deqjHzhqB5vCslYWEgrnbYRh-I)