方法一
在package.json中追加如下配置
"proxy":"http://localhost:5000"
说明:
-
优点:配置简单,前端请求资源时可以不加任何前缀。
-
缺点:不能配置多个代理。
-
工作方式:上述方式配置代理,当请求了3000不存在的资源时,那么该请求会转发给5000 (优先匹配前端资源)
方法二
-
第一步:创建代理配置文件
在src下创建配置文件:src/setupProxy.js
-
编写setupProxy.js配置具体代理规则:
const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function (app) { app.use(createProxyMiddleware('/api', { target: 'http://localhost:5000', changeOrigin: true, ws: true, pathRewrite: { '^/api': '' }, }), createProxyMiddleware('/runner', { target: 'http://localhost:5001', changeOrigin: true, ws: true, pathRewrite: { '^/runner': '' }, }) ); };
说明:
-
优点:可以配置多个代理,可以灵活的控制请求是否走代理。
-
缺点:配置繁琐,前端请求资源时必须加前缀。