React脚手架中配置代理的两种方式

配置代理原因：因为同源策略的限制，发请求获取数据的时候存在跨域问题
例：浏览器在端口号为3000，服务器开在5000端口号，这个时候就需要配置代理去解决跨域问题

第一种开启代理的方式

在package.json中配置代理服务器（“proxy”:“http://localhost:5000”）

• 优点：配置简单，前端请求资源时可以不加任何前缀。
• 缺点：不能配置多个代理。
• 工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源）

第二种开启代理的方式

在src下创建配置文件：src/setupProxy.js

src/setupProxy.js配置如下

const {
    
    createProxyMiddleware} = require('http-proxy-middleware')

module.exports = function(app){
    
    
    app.use(
        createProxyMiddleware('/api1',{
    
    //遇见/api1前缀的请求，就会触发该代理配置
            target:'http://localhost:5000', //请求转发给谁
            changeOrigin:true, //控制服务器收到的响应头中Host字段的值
            pathRewrite:{
    
    '^/api1':''} //重写请求路径（必须要做）
        }),
        createProxyMiddleware('/api2',{
    
    
            target:'http://localhost:5001',
            changeOrigin:true,
            pathRewrite:{
    
    '^/api2':''}
        })
    )
}

浏览器访问时，访问的代理服务器的地址需要加上标识代理服务器的标识

• 优点：可以配置多个代理，可以灵活的控制请求是否走代理。
• 缺点：配置繁琐，前端请求资源时必须加前缀。