React中配置反向代理

爱不起就别爱

1、下载相关依靠

  cnpm i http-proxy-middleware --save -dev

2、正在src目录下新建 setupProxy.js 的文件

 3、然后正在setupProxy.js写以下代码（2020-6-23日下载的版本）

1. const { createProxyMiddleware } = require('http-proxy-middleware')
3. module.exports = function (app) {
4.   app.use(createProxyMiddleware('/api', {
5.     target: 'http://10.16.21.29:8080/A/ar/api',
6.     secure: false,
7.     changeOrigin: true,
8.     pathRewrite: {
9.       "^/api": ""
10.     }
11.   }))
12. }

复造代码

4、报错打点（1）

网上许多老版本的写法以下：

 此时cmd中会报proxy is not a funtion 表示此办法曾经被弃用


旧版可正在setupProxy.js中设置proxy属性

1. const { createProxyMiddleware } = require('http-proxy-middleware')
3. module.exports = function (app) {
4.   app.use(createProxyMiddleware('/api', {
5.     target: 'http://www.ibugthree.com',
6.     secure: false,
7.     changeOrigin: true,
8.     pathRewrite: {
9.       "^/api": ""
10.     }
11.   }))
12. }

复造代码

5、报错打点（2）

之前用中心件做代办署理的工夫利用上里链接的教程是准确的，如今会报错

 将

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

复造代码

改成

1. const  createProxyMiddleware  = require('http-proxy-middleware');

复造代码

5、重启项目

npm start
报错打点
6、完---


免责声明：假如进犯了您的权益，请联络站少，我们会实时删除侵权内乱容，感谢协作！