ZanProxy: A Node.js Proxy Server for Frontend Development Efficiency

ZanProxy is a Node.js-based proxy server specifically designed to help frontend developers improve their development efficiency. It addresses common challenges in frontend development workflows.

Why Frontend Developers Need a Proxy Tool:

1. Debugging: Developers need a tool to debug QA, staging, and production environments directly using local frontend code.

2. Fast Environment Switching: Modifying system hosts causes browser DNS cache issues, requiring manual clearing. A tool is needed for instant host switching without waiting.

3. API Mocking: During parallel frontend-backend development, mock data is needed. Using nginx for reverse proxy to mock platforms is cumbersome and unfriendly to newcomers.

Previous Solutions and Their Limitations:

The team previously created Doraemon , a project-level mock tool that modifies AJAX request packets to forward requests to a mock data platform. However, it invades project code, strongly depends on AJAX request packages, and lacks extensibility.

They also created zRed , a Chrome browser extension that monitors all browser requests and forwards online CSS/JS requests to local files. However, as a Chrome extension, it cannot be used on other platforms like mobile devices for real device debugging.

ZanProxy Features:

1. Request Proxy and Forwarding: Supports HTTP and HTTPS proxying with user-configurable forwarding rules. Common usage: forwarding browser requests for static resources like JS and CSS to local files for debugging online pages with local code.

2. Team Rule Synchronization: Supports remote rules for team members to share the same forwarding rules, reducing communication costs. ZanProxy syncs the latest remote rules on startup, with all changes shared among users.

3. Painless Host Switching: Supports custom Host resolution for environment switching by replacing domain names with specified IPs during forwarding. Does not modify system Hosts files, so DNS resolution returns to normal after closing ZanProxy.

4. Custom Response Data: Allows users to mock API data without waiting for backend development to complete.

5. Request Monitoring: Monitors all proxied requests, showing request and response data. Users can set phone proxies to ZanProxy for monitoring mobile requests, facilitating real device debugging.

6. Custom Plugins: Supports user-developed custom plugins for extending functionality. For example, adding Access-Control-Allow-Origin headers to solve cross-origin issues.