React与Node代理通信：如何将代理配置移至配置文件？

Hey there, let's break this down for you step by step—this is a super common pain point when working with Create React App (I'm assuming you're using CRA since you mentioned the proxy field in package.json, but I'll cover manual webpack setups too).

Where does the proxy configuration actually take effect? #

The proxy field in package.json is a Create React App-specific shortcut that's directly read by CRA's built-in development server when it starts up. CRA doesn't look for external config files for this field, which is why moving it to a separate config file and importing it won't work—CRA's dev server never sees that value.

Can I import custom config for proxy settings? #

You can't directly import a config into package.json, but you can bypass the package.json proxy entirely and use a more flexible setup with http-proxy-middleware, which lets you pull in config from external files (or even environment variables) easily.

Practical Solutions #

For Create React App 2.0+ (most common scenario) #

1. First, install the required middleware:

npm install http-proxy-middleware --save-dev
# or with yarn
yarn add http-proxy-middleware --dev

2. Create a file named setupProxy.js in your src directory—CRA automatically loads this file when starting the dev server, no extra config needed.
3. Now you can import your custom config file here. Let's say you have a src/config.js with your API URL:

// src/config.js
export const API_BASE_URL = 'http://localhost:3001';

// src/setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');
import { API_BASE_URL } from './config';

module.exports = function(app) {
  // Proxy any requests starting with /api to your Node server
  app.use(
    '/api',
    createProxyMiddleware({
      target: API_BASE_URL,
      changeOrigin: true, // Important for avoiding CORS issues
    })
  );
};

Restart your dev server, and this proxy setup will work exactly like the package.json one—except now your URL is managed in a separate config file.

For manually configured React projects (non-CRA) #

If you set up your webpack config from scratch, you can directly configure the dev server proxy in your webpack.dev.js file and import your config:

// webpack.dev.js
const config = require('./path/to/your/config');

module.exports = {
  // ... your other webpack config
  devServer: {
    proxy: {
      '/api': {
        target: config.API_BASE_URL,
        changeOrigin: true,
      },
    },
  },
};

Bonus: Environment-specific proxy URLs #

If you need different proxy targets for dev, staging, or production, you can use environment variables instead of a static config file. Create a .env.development file in your project root:

# .env.development
REACT_APP_API_URL=http://localhost:3001

Then in setupProxy.js, use process.env.REACT_APP_API_URL:

// src/setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: process.env.REACT_APP_API_URL,
      changeOrigin: true,
    })
  );
};

This way, you can easily switch targets by swapping out .env files or setting environment variables directly.

内容的提问来源于stack exchange，提问作者Murakami