React Proxy 详细流程与配置方式(webpack、setupProxy.js、package.json)

简介: React Proxy 详细流程与配置方式(webpack、setupProxy.js、package.json)

一、package.json 配置方式【不推荐】

  • 全部以 GET 请求为例,每次修改配置后,重启项目,否则不生效
访问 http://127.0.0.1:6000/api/user/list 接口为例
  • 检查自己脚手架版本
$ create-react-app -V
  • 若脚手架版本在 2.0 以下,可以使用对象类型配置代理,在项目的 package.json 文件中配置如下:
"proxy": {
  "/api": {
    "target": "http://127.0.0.1:6000/api", # 跨域地址
    "changeOrigin": true,              # 是否允许跨域
    "pathRewrite": {                   # 重写路径
      "^/api": ""
    }
  }
}
  • 举例: 配置好后,按代理标识访问
useEffect(() => { 
  $get('/api/user/list').then(res => {
    console.log(res)
  }).catch((err) => {
    console.log(err)
  })
}, [])
  • 若脚手架版本在 2.0 以上,只能配置 string 类型
"proxy": "http://127.0.0.1:6000"
  • 举例: 配置好之后可以直接访问
// 方式一:不带域名,直接接口地址即可
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)
  })
}, [])

二、craco.config.js 配置方式【主推荐】

三、setupProxy.js 配置方式【主推荐】

  • 配置一个或多个代理,最好的方式是使用 middleware 中间件进行配置。
  • 检查 package.json 中是否安装了 http-proxy-middleware,如果没有手动安装下:
    最新版本一般是默认有安装,最好在 $ npm i 安装一遍依赖后,全局搜一下,可能 package-lock.json 中会安装,是脚手架默认安装的,确定没有安装在跑下面命令:
# yarn
$ yarn add http-proxy-middleware
# npm
$ npm i http-proxy-middleware
  • 默认安装的话,就只需要新建下面配置文件即可。
  • 安装后如果报错 webpack < 5 used to include polyfills for node.js core … 解决方案
  • src 中,新建 setupProxy.js(文件名固定,不可自定义,react 脚手架会识别),在文件中写以下配置内容(新项目都是推荐使用高版本,不然可能会无法启动项目)。
文件路径: /src/setupProxy.js
  • http-proxy-middleware1.0 以后):
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-middleware1.0 以前,老版本):
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': ''
      }
    })
  )
}

四、webpack 配置方式【不推荐】

$ npm run eject
  • 找到 webpack 代理相关配置,在 /config/webpackDevServer.config.js 文件中搜索 proxy

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

五、自定义 webpack 配置文件方式【不推荐】

  • 这种就不写了,写个 demo 麻烦,比如用最新版本的 webpack 搭建一个 React 项目,脚手架可能还不支持,或者手痒想全部走自定义的 webpack 配置,这个时候就需要单独 webpack 各个环境的配置文件,然后修改 package.json 中的执行命令,走自定义的 webpack 配置文件。

土、上面几种代理配置方式,配置后的使用案例代码

  • 案例代码
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)
  })
}, [])
相关文章
|
8天前
|
JavaScript 前端开发
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
|
8天前
|
JavaScript 前端开发 算法
设计一个简单的JavaScript版“俄罗斯方块”游戏的基本逻辑流程。
```md 设计JavaScript版俄罗斯方块游戏涉及初始化环境、创建游戏容器、管理变量、加载音效。游戏循环中生成方块、键盘控制移动与旋转、碰撞锁定、行消除及分数更新。当游戏区域填满时结束游戏,显示结束画面。还包括暂停、重置等辅助功能。伪代码示例展示了核心逻辑,实际实现需考虑更多细节和用户体验增强。 ```
33 3
|
8天前
create-react-app配置环境变量
create-react-app配置环境变量
82 0
|
8天前
|
中间件
egg.js 24.17中间件配置
egg.js 24.17中间件配置
25 0
egg.js 24.17中间件配置
|
8天前
|
API
在vite.config.js 配置代理
在vite.config.js 配置代理
107 2
|
8天前
|
JSON C++ 数据格式
【C++】Visual Studio C++使用配置Json库文件(老爷式教学)
【C++】Visual Studio C++使用配置Json库文件(老爷式教学)
|
8天前
|
前端开发 测试技术
测Nuxt.js入坑,配置dev、test、pro三种环境的变量env
先下载一个cross-env模块,比较好控制环境
25 5
|
5天前
|
移动开发 前端开发 JavaScript
Vue2 系列:vue.config.js 参数配置
Vue2 系列:vue.config.js 参数配置
13 2
|
8天前
|
Web App开发 前端开发 JavaScript
在 Chrome 开发者工具里配置哪些类型的 JavaScript 文件应该被调试器忽略
在 Chrome 开发者工具里配置哪些类型的 JavaScript 文件应该被调试器忽略
7 0
|
8天前
|
前端开发 API
nuxt.config.js 配置
我们在使用Nuxt.js提供的create-nuxt-app 创建项目后,更希望对它自定义一些东西,这里我们可以在根目录下找到nuxt.config.js
22 7

热门文章

最新文章