一、vue项目中
1、根目录中创建vue.config.js
module.exports = {
pages: {
index: {
//入口
entry: 'src/main.js',
},
},
lintOnSave:false, //关闭语法检查
//开启代理服务器(方式一)
// devServer: {
// proxy: 'http://localhost:5000'
// },
//开启代理服务器(方式二)
devServer: {
proxy: {
'/atguigu': {
target: 'http://localhost:5000',
pathRewrite:{'^/atguigu':''},//重新路径-正则,匹配所有以atguigu开头的
// ws: true, //用于支持websocket
// changeOrigin: true //用于控制请求头中的host值
},
'/demo': {
target: 'http://localhost:5001',
pathRewrite:{'^/demo':''},
// ws: true, //用于支持websocket
// changeOrigin: true //用于控制请求头中的host值
}
}
}
}
扩展用法:
module.exports = {
devServer:{
host:'localhost',//访问主机
port:8080,//端口
proxy:{//代理-很重要
'/api' :{
target:'http://mall-pre.springboot.cn',//访问的接口
changeOrigin:true,//是否将主机头的原点设置为目标url位置
pathRewrite:{//转发地址
'/api':''//添加路径的时候,把/api转为空,会把api后面的地址当作真实地址,每个接口都会含/api
}
},
}
},
// publicPath:'/app',//打包和预览的时候或者,子路径多出一个地址拼接/app
outputDir:'dest',//整个环境打包完之后的输出路径原来是默认是dist 现在是dest文件
// indexPath:'index2.html',//单页面的文件名
lintOnSave:false, //关闭esli语法检查
productionSourceMap:false,
chainWebpack:(config)=>{//按需加载
config.plugins.delete('prefetch')
}
}
二、在react项目中
react17.x
1、方法一:在package.json中加:
例子代理的接口为:http://localhost:5000;
"proxy":"http://localhost:5000"
方法二,多个代理:
在src路径下,创建setupProxy.js文件
const proxy = require('http-proxy-middleware');
// 这个玩意不用下,react里自己带了
module.exports = function(app) {
app.use(
proxy('/api1', { // 发送请求的时候 react会自动去找这个api1,匹配这个路径,然后去发送对的请求
target: 'http://localhost:5000',
changeOrigin: true, //控制服务器接收到的请求头中host字段的值
pathRewrite: {'^/api1': ''} // 跟上面匹配,这个api1只是找这个路径用的,实际接口中没有api1,所以找个目标地址后,要把api1给替换成空
}),
// changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000
// changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:3000
// 注意!!注意!!注意!! changeOrigin默认值为false,需要我们自己动手把changeOrigin值设为true
proxy('/api2', {
target: 'http://localhost:5001',
changeOrigin: true,
pathRewrite: {'^/api2': ''}
}),
)
}
二、在react18中基本上和react17.x一样,就在多个代理上有一点点区别;
在src路径下,创建setupProxy.js文件:
const { createProxyMiddleware } = require('http-proxy-middleware')
module.exports = function (app) {
app.use(
createProxyMiddleware('/api1', {
target: 'http://localhost:5000',
changeOrigin: true,
pathRewrite: { '^/api1': '' }
}),
createProxyMiddleware('/api2', {
target: 'http://localhost:5001',
changeOrigin: true,
pathRewrite: { '^/api2': '' }
}),
)
}