React（脚手架3.4.0）服务代理配置

最新推荐文章于 2023-08-26 16:45:49 发布

Levent_G

最新推荐文章于 2023-08-26 16:45:49 发布

阅读量284

点赞数

分类专栏： react 前端代理

本文链接：https://blog.csdn.net/key_xyes/article/details/105266242

版权

前端同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

react

1 篇文章 0 订阅

订阅专栏

代理

1 篇文章 0 订阅

订阅专栏

老版本配置方法

在package.json中添加

{
	......
	"proxy": {
		"/api/**"
		"target": "http://host:port/path"
	}
}

新版本配置方法

在package.json中添加

{
	......
	"proxy":{
		"/api/**": "http://host:port/path"
	}
}

不再支持多个代理的设置，若需要设置多个代理，可选用如下方案：

安装http-proxy-middleware

npm i http-proxy-middleware --save-dev

设置代理
在src下新建setupProxy.js文件，并写入一下代码

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

const proxyConf = {
    '/api/**': {
        target: 'http://localhost:8088/'
    }
};
module.exports = function (app) {
    Object.keys(proxyConf)
        .forEach(k => app.use(proxy.createProxyMiddleware(k, proxyConf[k])));
};