react脚手架配置代理

-

如果项目中就请求一个地址可以直接在package.json中配置

有点：配置简单，不用加前缀

缺点：不能配置多个代理

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

如果项目中需要配置多个代理

优点：可以配置多个代理

react17版本的代理配置需要在src/setupProxy.js中配置

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

module.exports = function(app) {
  app.use(
    proxy('/api1', {
      target: "http://localhost:5000",
      changeOrigin: true, // 控制服务器收到的请求头中的Host的值 如果设置为true，服务器不会知道真实的请求地址，只会知道代理的地址，如果设置为false，服务器会知道真正请求的地址
      pathRewrite: {'^/api1': ''} // 重写请求路径 这个必须要加，如果不加 服务器端收到的请求地址是 /api/url 请求地址就不对了
    }),
    proxy('/api2', {
      target: "http://localhost:5001",
      changeOrigin: true,
      pathRewrite: {'^/api2': ''}
    })
    // ...
  )
}

react18版本的配置，主要的差异是需要用http-proxy-middleware中的createProxyMiddleware创建代理

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

module.exports = function(app) {
  app.use(
    createProxyMiddleware('/api1', {
      target: "http://localhost:5000",
      changeOrigin: true, // 控制服务器收到的请求头中的Host的值
      // 假如前端的服务是localhost:3000
      // changeOrigin:true 时 ，服务器收到的Host是 localhost:5000
      // changeOrigin:false 时 ，服务器收到的Host是 localhost:3000
      pathRewrite: {'^/api1': ''} // 重写请求路径 这个必须要加，如果不加 服务器端收到的请求地址是 /api/url 请求地址就不对了
    }),
    createProxyMiddleware('/api2', {
      target: "http://localhost:5001",
      changeOrigin: true,
      pathRewrite: {'^/api2': ''}
    })
    // ...
  )
}

 

 

 

 

 

-