2022-02-28 Learning Records--React-Solving Cross-Domain Problems: Configuring Proxy

First, the way to configure the proxy 1

package.jsonAdd it in , "proxy":"服务器地址"for example as follows:

then modify the port number of the address that axiossends the network request, as shown below:

Second, the way to configure the proxy 2

srcCreate a new file in it: setupProxy.js, and the custom content is as follows:

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

module.exports = function(app) {
    
    
    app.use(
    	// 代理1
        proxy('/api1',{
    
     // 遇见/api1前缀的请求，就会触发该代理配置
            target: 'http://localhost:5000', // 请求转发给谁
            changeOrigin: true, // 控制服务器收到的请求头中Host字段的值，默认值是false
            pathRewrite:{
    
    '^/api1':''} // 重写请求路径【必需】
        }),
        // 代理2
        proxy('/api2',{
    
    
            target: 'http://localhost:5001',
            changeOrigin: true,
            pathRewrite:{
    
    '^/api2':''}
        }),
    )
}

Add it after the port number corresponding to the address that axiossends the network request /配置代理的名字, for example: /api1, see the figure below:

3. reactScaffolding configuration proxy summary

These are the study notes of the bilibili Shang Silicon Valley React learning video~