vue项目配置代理devServer解决跨域问题(开发环境使用)
在@vuecli3或4搭建的项目中:在vue.config.js中配置devServer选项devServer: {// host: 'localhost',port: 8090, //项目运行的端口号open: true, //配置自动启动浏览器proxy: {"/opAdmin": {target: "http://116.66.65.193:8081", //对应自己的接口changeOri
·
在@vuecli3或4搭建的项目中:
在vue.config.js中配置devServer选项
devServer: {
// host: 'localhost',
port: 8090, //项目运行的端口号
open: true, //配置自动启动浏览器
proxy: {
"/opAdmin": {
target: "http://116.66.65.193:8081", //对应服务端的接口地址
changeOrigin: true, // 开启跨域
pathRewrite: {
"^/opAdmin": "/opAdmin" //将以 /opAdmin 开头的接口重写http://116.66.65.193:8081/opAdmin ,调用时直接以 /opAdmin开头即表示调用http://116.66.65.193:8081/opAdmin
// "^/opAdmin": "/" //将以 /opAdmin 开头的接口重写http://116.66.65.193:8081/ ,调用时直接以 /opAdmin开头即表示调用http://116.66.65.193:8081/
// "^/opAdmin": "" //将以 /opAdmin 开头的接口重写http://116.66.65.193:8081 ,调用时直接以 /opAdmin开头即表示调用http://116.66.65.193:8081
}
},
"/DoorStatus": {
target: "http://47.99.11.102:8088", //对应服务端的接口地址
changeOrigin: true
}
}
}
如果不配置pathRewrite,则默认是使用当前值重写当前值,即:请求'/opAdmin/getList'实际请求的是'http://116.66.65.193:8081/opAdmin/getList'
如果配置pathRewrite:{"^/opAdmin": "" },则当前值可以看做是一个代替域名的东西,即:请求'/opAdmin/getList'实际请求的是'http://116.66.65.193:8081/getList'
注意:该配置只能在开发环境中使用,正式环境还是要换其他方法,比如后端设置可以跨域,nginx反向代理,前端使用jsonp处理跨域
更多推荐
已为社区贡献28条内容
所有评论(0)