Proxy代理配置解析

create-react-app >= 2.0

create-react-app脚手架2.0版本以上只能配置string类型：

"proxy": "https://xxx.com", 

寻找配置来源

这里的配置指向package.json里面的proxy属性, 这是一个全局配置，如果你请求了 /api/xxx，只要/api/xxx不是路由且不是资源路径，就会识别为一个外部请求，最终请求localhost:3000/api/xxx => https://xxx.com/api/xx

create-react-app < 2.0

create-react-app脚手架2.0版本以内配置是object类型：

"proxy":{ "/api/**":{ "target":"https://xxx.com", "changeOrigin": true } } 

create-react-app >= 2.0 推荐配置

npm i http-proxy-middleware

找到 webpackDevServer.config.js onBeforeSetupMiddleware添加中间件配置 找到 paths.proxySetup 发现配置文件是在src/setupProxy.js

新建src/setupProxy.js并添加代理配置

const { createProxyMiddleware } = require("http-proxy-middleware"); module.exports = function (app) { app.use( createProxyMiddleware("/api1", { target: "https://xxx.com", changeOrigin: true, pathRewrite: { "^/api1": "", }, }) ); app.use( createProxyMiddleware("/api2", { target: "https://web03.cn", changeOrigin: true, pathRewrite: { "^/api2": "/api2", }, }) ); }; 

请求 /api1/list => https://xxx.com/list /api2/list => https://web03.cn/api2/list

为啥新建了proxy文件，但是不生效？请注意引入的配置文件地址是否相同，最根本的他就是直接在devServer里面配置

vue配置

vue.config.js

devServer: { disableHostCheck: true, hot:true,//热更新 open: true,// 启动是否自动打开浏览器 proxy: { '/pioneer': { target: 'https://xxx.com', pathRewrite: {"/pioneer" : ""}, // 后台在转接的时候url中是没有 /api 的 changeOrigin: true, // 加了这个属性，那后端收到的请求头中的host是目标地址 target } }, } },