Methods a

Append the following configuration to package.json

"proxy":"http://localhost:5000"

Description:

  1. Advantages: simple configuration, front-end requests for resources can not add any prefix.
  2. Cons: Cannot configure multiple agents.
  3. How it works: Configure the agent in such a way that when 3000 resources are requested that do not exist, the request will be forwarded to 5000 (with preference for matching front-end resources).

Method 2

1. Step 1: Create the proxy configuration file

Create a configuration file under SRC: SRC/setupproxy.js

2. Write specific proxy rules for SetupProxy.js configuration:

const proxy = require('http-proxy-middleware') module.exports = function(app) { app.use( proxy('/api1', {//api1 is the request that needs to be forwarded (all requests with /api1 prefix are forwarded to 5000) target: 'http://localhost:5000', // configure the forwarding address (server address that can return data) for ChangeOrigin: /* When changeOrigin is set to true, the host field in the header received by the server is: When localhost:5000 changeOrigin is set to false, the server receives the request header with host as: ChangeOrigin is false by default, but we usually set changeOrigin to true */ pathRewrite: {'^/api1': }), proxy('/api2', {target: 'http://localhost:5001', ChangeOrigin: 'API'), proxy('/api2', {target: 'http://localhost:5001', ChangeOrigin: true, pathRewrite: {'^/api2': ''} }) ) }

Description:

  1. Advantages: you can configure multiple agents, you can flexibly control whether the request to proxy.
  2. Disadvantages: cumbersome configuration, front-end requests for resources must be added to the prefix.