- . 正常来说,工作中,一个前端工作中,只需要配置一个跨域请求就好了,在webpack的devServer.proxy代理中配置一下就行,以后就不需要改动了,但是,你遇到过在一个项目中前端需要访问好多端口号发送请求的时候嘛,肯定很有吧,下面就来讲解一下
- 如果公司里面就一两个后端还好点,但是我们这后台太多了,每个人开发的模块都不同,要是遇到了,同时访问两个或者以上的服务器端口时,是不是就不能向上面那个在devServer.proxy中配置一个了,其实很简单,下面就要来介绍一下wepback中proxyTable
- 一般情况下配置一个就好了,可以这么写
proxyTable: {
'/api': {// '/api':匹配项
target: 'http://192.168.10.183:8103',// 接口的域名
// secure: false,// 如果是https接口,需要配置这个参数
changeOrigin: true,// 如果接口跨域,需要进行这个参数配置
// pathRewrite: {// 如果接口本身没有/api需要通过pathRewrite来重写了地址
// '^api': ''
// }
}
}
- 不知道各位大佬的公司是怎么用的这个,我们这里是提前封装好的,封装的方法东西太多了,具体怎么封装的,我在这里也不好拿出来分享了,可以给各位大佬看一下,我们封装后,怎么使用的
const development = {
frontend: {
port: WEB_PORT,
index: path.resolve(__dirname, './client/dist/index.html'),
assetsRoot: path.resolve(__dirname, './client/dist'),//封装好的文件
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api/aaa': {
target: 'http:*********',
changeOrigin: true,
pathRewrite: {
'^/api/aaa': '/api'
}
},
'/api/ccc': {
target: 'http:******',
changeOrigin: true,
pathRewrite: {
'^/api/ccc': '/api'
}
},
'/api/guard': {
target: 'http://******',
changeOrigin: true,
pathRewrite: {
'^/api/guard': '/api'
}
},
'/api/safm': {
target: SEND_SMS,
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
},
'/api/bstar': {
target: BSTAR_PROXY_API,
changeOrigin: true,
pathRewrite: {
'^/api/bstar': '/api'
}
},
'/api':{
target:PROXY_API
}
},
cssSourceMap: false
},
上面这些代码不用说,都是在config.js里面的
下面跟给位大佬说说env, 不知道给位大佬怎么用这个env文件的,
# NODE_ENV=production
NODE_ENV=development
WEB_PORT=9009
PROXY_API= http://*******
# wangshenzhao
men = http://******
#HAO_GE
#http://********
#yinpin
YIN_PIN= http://*********
#menjin
GUARD_API=http://*******
#shuxing
SHU_XING=http://**********
# 发送短信ip
SEND_SMS = http://**********
# 访问北京的服务接口
BSTAR_PROXY_API = http://*********
- 一共是两种写法,第一个直接在config.js中间直接写服务器端口号,另一种是在env里面配置,然在,config.js里面引入一下,向我那样在里面定义一个变量,在引用时直接使用这个变量就行
- 具体的详细跨域,大家可以参考一下我的这篇文章,说的挺详细的,方法也挺多的
- 跨域文章链接https://blog.csdn.net/Cool_so_cool/article/details/105770046