React Proxy detailed process and configuration method (webpack, setupProxy.js, package.json)

1. `package.json`Configuration method

All take GETthe request as an example, 每次修改配置后，重启项目，否则不生效.
```
访问 http://127.0.0.1:6000/api/user/list 接口为例
```
Check your own scaffolding version
```
$ create-react-app -V
```

If the scaffolding version is 2.0below, you can use the object type to configure the proxy, which package.jsonis configured in the project's file as follows:

"proxy": {
      
      
  "/api": {
      
      
    "target": "http://127.0.0.1:6000/api", # 跨域地址
    "changeOrigin": true,              # 是否允许跨域
    "pathRewrite": {
      
                         # 重写路径
      "^/api": ""
    }
  }
}

Example:配置好后，按代理标识访问

useEffect(() => {
      
       
  $get('/api/user/list').then(res => {
      
      
    console.log(res)
  }).catch((err) => {
      
      
    console.log(err)
  })
}, [])

If the scaffolding version is 2.0above, only stringthe type can be configured

"proxy": "http://127.0.0.1:6000"

Example:配置好之后可以直接访问

// 方式一：不带域名，直接接口地址即可
useEffect(() => {
      
      
  $get('/api/user/config_name').then(res => {
      
      
    console.log(res)
  }).catch((err) => {
      
      
    console.log(err)
  })
}, [])

// 方式二：带上域名也没问题，但是这种写法发布到线上就会有问题，需要判断环境切换域名
useEffect(() => {
      
      
  $get('http://127.0.0.1:6000/api/user/list').then(res => {
      
      
    console.log(res)
  }).catch((err) => {
      
      
    console.log(err)
  })
}, [])

2. `setupProxy.js`Configuration method`(推荐方案)`

Configure one or more proxies, preferably using middlewaremiddleware.
Check package.jsonif it is installed http-proxy-middleware, if not installed manually:
```
# yarn
$ yarn add http-proxy-middleware

# npm
$ npm i http-proxy-middleware
```
In src, create a new setupProxy.jsone (the file name is fixed, not customizable, and reactthe scaffolding will recognize it), and write the following configuration content in the file (new projects are recommended to use a higher version, otherwise the project may not be able to start).
```
文件路径: /src/setupProxy.js
```

http-proxy-middleware( 1.0later):

const proxy = require('http-proxy-middleware')

module.exports = function (app)  {
      
      
  app.use(
    // 代理 1
    proxy.createProxyMiddleware('/api', {
      
                   // 匹配到 '/api' 前缀的请求，就会触发该代理配置
      target: 'http://127.0.0.1:6000/api',  // 请求转发地址
      changeOrigin: true,                             // 是否跨域
      /*
        changeOrigin 为 true 时，服务器收到的请求头中的host为：127.0.0.1:6000，也就是代理地址的 host
        changeOrigin 为 false 时，服务器收到的请求头中的host为：localhost:3000，也就是本地站点地址的 host
        changeOrigin 默认 false，但一般需要将 changeOrigin 值设为 true，根据自己需求调整
      */
      pathRewrite: {
      
      
        '^/api': ''                                   // 重写请求路径
      }
    }),
    // 代理 2，为什么 2 写前面，因为匹配规则，上面第一个已经是 /api 了，要不然会优先匹配到第一个代理上
    proxy.createProxyMiddleware('/2api', {
      
      
      target: 'http://127.0.0.1:6000/api',
      changeOrigin: true,
      pathRewrite: {
      
      
        '^/2api': ''
      }
    }),
    // 代理 3，这种写法是最规范的，前后都加 /
    proxy.createProxyMiddleware('/3api/', {
      
      
      target: 'http://127.0.0.1:6000/api/',
      changeOrigin: true,
      pathRewrite: {
      
      
        '^/3api/': ''
      }
    }),
    // 代理 4，这种代理标识尾部加 / ，代理地址尾部没有
    proxy.createProxyMiddleware('/4api/', {
      
      
      target: 'http://127.0.0.1:6000/api',
      changeOrigin: true,
      pathRewrite: {
      
      
        // '^/4api/': ''  // 这种替换成空，也没问题，但是不严谨
        '^/4api/': '/'    // 这样写更规范
      }
    })
    // ..... 多个代理
  )
}

http-proxy-middleware( 1.0previously, older version):

const proxy = require('http-proxy-middleware')

module.exports = function (app)  {
      
      
  app.use(
    // 代理 1
    proxy('/api', {
      
      
      target: 'http://127.0.0.1:6000/api',
      changeOrigin: true,
      pathRewrite: {
      
      
        '^/api': ''
      }
    }),
    // 代理 2
    proxy('/2api', {
      
      
      target: 'http://127.0.0.1:6000/api',
      changeOrigin: true,
      pathRewrite: {
      
      
        '^/2api': ''
      }
    })
  )
}

3. `webpack`Configuration method

If it is a new project, you can learn about the function of the $ npm run eject command at the bottom of the article .
Execute the unpack command, if it has already been unpacked, ignore it.
```
$ npm run eject
```
Find webpackproxy related configuration, /config/webpackDevServer.config.jssearch in the file proxy.

proxyChange to

proxy: {
      
      
  '/api': {
      
      
    target: 'http://127.0.0.1:6000/api',
    changeOrigin: true,
    pathRewrite: {
      
      
      '^/api': ''
    }
  }
  // 更多代理配置
},

4. Custom `webpack`configuration file method

I won’t write this kind of thing, it’s troublesome to write , for example, if you build a project demowith the latest version , the scaffolding may not support it, or you want to use all custom configurations, at this time, you need to separate the configuration files of each environment, and then modify them Execute the command in the custom configuration file.webpackReactwebpackwebpackpackage.jsonwebpack

Soil, the above several agent configuration methods, and the use case code after configuration

case code

useEffect(() => {
      
      
  // '/api'
  $get('/api/user/config_name').then(res => {
      
      
    console.log(res)
  }).catch((err) => {
      
      
    console.log(err)
  })
  // '/2api'
  $get('/2api/user/config_name').then(res => {
      
      
    console.log(res)
  }).catch((err) => {
      
      
    console.log(err)
  })
  // '/3api/'
  $get('/3api/user/config_name').then(res => {
      
      
    console.log(res)
  }).catch((err) => {
      
      
    console.log(err)
  })
  // '/4api/'
  $get('/4api/user/config_name').then(res => {
      
      
    console.log(res)
  }).catch((err) => {
      
      
    console.log(err)
  })
}, [])

React Proxy detailed process and configuration method (webpack, setupProxy.js, package.json)

1. package.jsonConfiguration method

2. setupProxy.jsConfiguration method(推荐方案)

3. webpackConfiguration method

4. Custom webpackconfiguration file method

Soil, the above several agent configuration methods, and the use case code after configuration

Guess you like

1. `package.json`Configuration method

2. `setupProxy.js`Configuration method`(推荐方案)`

3. `webpack`Configuration method

4. Custom `webpack`configuration file method