diff --git a/README.md b/README.md index 0442354..612d971 100644 --- a/README.md +++ b/README.md @@ -34,3 +34,44 @@ app.UseCors(builder => .AllowAnyHeader() ); ``` + +### setup proxy for react frontend to communicate with dotnet backend + +#### Basic Configuration +Add a proxy field to your React app's package.json to handle API calls to the .NET backend: + +```json +{ + "name": "your-react-app", + "version": "0.1.0", + "private": true, + "proxy": "http://localhost:5000", + "dependencies": { + // ... your dependencies + } +} +``` + +This proxy configuration allows your React app (running on port 3000) to make API calls to your .NET backend (running on port 5000) without CORS issues during development. + +#### Advanced Configuration +For more complex proxy scenarios, you can create a setupProxy.js file in the src folder: + +```javascript +const { createProxyMiddleware } = require('http-proxy-middleware'); + +module.exports = function(app) { + app.use( + '/api', + createProxyMiddleware({ + target: 'http://localhost:5000', + changeOrigin: true, + }) + ); +}; +``` + +Note: You'll need to install http-proxy-middleware if using setupProxy.js: +```zsh +npm install --save-dev http-proxy-middleware +```