React 配置反向代理

最新推荐文章于 2023-09-05 15:29:10 发布

臭宝520

最新推荐文章于 2023-09-05 15:29:10 发布

阅读量283

点赞数 1

文章标签： html5 javascript html

本文链接：https://blog.youkuaiyun.com/xiao980522/article/details/120046555

版权

1、下载相关依赖

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

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

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

const { createProxyMiddleware } = require('http-proxy-middleware')
 
module.exports = function (app) {
  app.use(createProxyMiddleware('/api', {
    target: 'http://10.16.21.29:8080/A/ar/api',
    secure: false,
    changeOrigin: true,
    pathRewrite: {
      "^/api": ""
    }
  }))
}

4、报错解决（1）
网上很多老版本的写法如下：

此时cmd中会报proxy is not a funtion 表示此方法已经被弃用
旧版可在setupProxy.js中设置proxy属性

const { createProxyMiddleware } = require('http-proxy-middleware')
 
module.exports = function (app) {
  app.use(createProxyMiddleware('/api', {
    target: 'http://www.ibugthree.com',
    secure: false,
    changeOrigin: true,
    pathRewrite: {
      "^/api": ""
    }
  }))
}

4、报错解决（2）

将之前用中间件做代理的时候使用上面链接的教程是正确的，现在会报错

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

改为

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

5、重启项目

npm start

报错解决