React Scaffolding Configuration Agent Complete Guide (Latest Recommendation)

React Scaffolding Configuration Agent Complete Guide

1. Overview of proxy configuration methods

There are several main ways to configure agents in React scaffolding:

Configure a simple proxy in
Configure complex proxy in src/
Using nginx reverse proxy
Configure the proxy using environment variables

2. Basic configuration method

2.1 Simple configuration

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:5000"
}

Characteristics of this method:

Advantages: Simple configuration
Disadvantages: Only a single proxy can be configured
Applicable scenarios: only need to proxy to a single interface server

2.2 Configuration

// src/
const { createProxyMiddleware } = require('http-proxy-middleware');
 = function(app) {
  (
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    })
  );
  (
    '/api2',
    createProxyMiddleware({
      target: 'http://localhost:5001',
      changeOrigin: true,
      pathRewrite: {
        '^/api2': ''
      }
    })
  );
};

Characteristics of this method:

Advantages: Multiple agents can be configured, more flexible
Disadvantages: Relatively complex configuration
Applicable scenario: need to proxy to multiple servers

3. Advanced configuration examples

3.1 A proxy with authentication

// src/
const { createProxyMiddleware } = require('http-proxy-middleware');
 = function(app) {
  (
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
      onProxyReq: function(proxyReq, req, res) {
        // Add custom request header        ('Authorization', 'Bearer your-token');
      },
      onProxyRes: function(proxyRes, req, res) {
        // Process the response header        ['x-proxy-by'] = 'your-app';
      }
    })
  );
};

3.2 A proxy with path rewrite

// src/
const { createProxyMiddleware } = require('http-proxy-middleware');
 = function(app) {
  (
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
      pathRewrite: {
        '^/api/old-path': '/api/new-path', // Rewrite the path        '^/api/remove': '' // Delete the path      },
      router: {
        // Change the target server according to the request path        ':3000': 'http://localhost:8000',
        ':3000': 'http://localhost:9000'
      }
    })
  );
};

3.3 Agent with load balancing

// src/
const { createProxyMiddleware } = require('http-proxy-middleware');
// Define the target server listconst targets = [
  'http://localhost:5000',
  'http://localhost:5001',
  'http://localhost:5002'
];
let currentIndex = 0;
 = function(app) {
  (
    '/api',
    createProxyMiddleware({
      target: targets[0],
      changeOrigin: true,
      router: () =&gt; {
        // Simple polling load balancing        currentIndex = (currentIndex + 1) % ;
        return targets[currentIndex];
      }
    })
  );
};

4. Environment variable configuration

4.1 Creating an environment variable file

# .
REACT_APP_API_URL=http://localhost:5000
# .
REACT_APP_API_URL=

4.2 Configuring the proxy using environment variables

// src/
const { createProxyMiddleware } = require('http-proxy-middleware');
 = function(app) {
  (
    '/api',
    createProxyMiddleware({
      target: .REACT_APP_API_URL,
      changeOrigin: true
    })
  );
};

5. FAQs and Solutions

5.1 Cross-domain issues

// src/
 = function(app) {
  (
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
      onProxyRes: function(proxyRes, req, res) {
        // Handle cross-domain response headers        ['Access-Control-Allow-Origin'] = '*';
        ['Access-Control-Allow-Methods'] = 'GET,PUT,POST,DELETE,OPTIONS';
        ['Access-Control-Allow-Headers'] = 'Content-Type,Authorization';
      }
    })
  );
};

5.2 WebSocket Agent

// src/
 = function(app) {
  (
    '/socket',
    createProxyMiddleware({
      target: 'ws://localhost:5000',
      ws: true, // Enable websocket proxy      changeOrigin: true
    })
  );
};

5.3 Error handling

// src/
 = function(app) {
  (
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
      onError: function(err, req, res) {
        (500, {
          'Content-Type': 'text/plain'
        });
        ('Proxy Error: ' + err);
      }
    })
  );
};

6. Production environment configuration

6.1 Using nginx configuration

# 
server {
    listen 80;
    server_name ;
    location /api {
        proxy_pass http://backend-server;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
    location / {
        root /usr/share/nginx/html;
        index ;
        try_files $uri $uri/ /;
    }
}

7. Best Practices

Development environment recommendations：

Use to configure
Avoid using agents in production environments
Manage configuration using environment variables

Production environment suggestions：

Use professional proxy servers such as nginx
Configure the appropriate cache policy
Pay attention to security configuration

Debugging Tips：

Use the Debug Agent Configuration
Check the Network Request Panel
Verify request headers and response headers

Performance optimization：

Use cache reasonably
Avoid unnecessary agents
Consider using load balancing

This is the article about the complete guide to React Scaffolding Configuration Agent. For more related React Scaffolding Configuration Agents, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!