API Request Proxy Configuration

Build a development proxy configuration system for a React application that needs to communicate with multiple backend services during development while avoiding CORS issues.

Requirements

Your application needs to proxy requests to two different backend services:

1. REST API Service: Running at http://localhost:5000

   • All requests to /api/* should be forwarded to this service
   • The /api prefix should be removed before forwarding (e.g., /api/users becomes /users on the backend)
   • The origin header should be changed to match the target server

2. WebSocket Service: Running at ws://localhost:5001

   • All requests to /ws/* should be forwarded to this service
   • WebSocket connections must be properly proxied
   • The /ws prefix should be removed before forwarding

Additionally, all proxied requests should have debug-level logging enabled to help with troubleshooting during development.

Implementation

Create a file named setupProxy.js in the src/ directory that configures these proxy rules for the development server.

@generates

Test Cases

• When a request is made to /api/users, it should be proxied to http://localhost:5000/users with the origin header changed @test
• When a WebSocket connection is made to /ws/chat, it should be proxied to ws://localhost:5001/chat @test
• All proxy requests should have debug-level logging enabled @test

Dependencies { .dependencies }

http-proxy-middleware { .dependency }

Provides middleware for proxying HTTP and WebSocket requests in development.

@satisfied-by