位置: IT常识 - 正文

vue.config.js配置proxy代理解决跨越;proxy代理报404;(vueconfigjs配置proxy 无效)

编辑:rootadmin
vue.config.js配置proxy代理解决跨越;proxy代理报404;

推荐整理分享vue.config.js配置proxy代理解决跨越;proxy代理报404;(vueconfigjs配置proxy 无效),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vueconfigjs配置proxy不管用,vueconfigjs配置proxy和nginx的关系,vueconfigjs配置proxy和nginx,vueconfigjs配置proxy打包prod,vueconfigjs配置proxy 打印出代理的地址,vueconfigjs配置proxy,vueconfigjs配置proxy不管用,vueconfigjs配置proxy不管用,内容如对您有帮助,希望把文章链接给更多的朋友!

像我们本地的vue项目运行起来,访问的地址一般是localhost,这个时候请求后台的接口,端口号也不一致,肯定就会存在跨域问题,所以我们要是想正常访问接口的话,就需要解决掉跨域问题。

本文我们是在vue.config.js配置proxy代理解决跨越:如果没有vue.config.js,就直接在项目根目录下建一个即可。

const path = require('path')const resolve = (dir) => path.join(__dirname, dir)module.exports = { publicPath: './', // 打包路径,使用相对路径生成的dist文件夹下的index可以打开 outputDir: 'dist', // 输出文件目录 productionSourceMap: false, // 取消生成map文件 lintOnSave: false, // 配置关闭eslint (代码会有红色热浪提示错 但不影响代码运行) // webpack-dev-server 相关配置 devServer: { open: true, // 自动打开浏览器 host: '0.0.0.0', /* 设置为0.0.0.0则所有的地址均能访问 */ port: 8080, // 端口号 https: false, // 是否使用https协议 hotOnly: false, // 是否开启热更新 // proxy: null // 设置代理 disableHostCheck: true, // 开启可以用自己的域名 //【【【【【【【【【【【【【【【【【【【【【注意修改和配置代理后,一定要重启项目 否则无效或404】】】】】】】】】】】】】】】】】 //【【【【【【【【【【【【【【【【【【【【【注意修改和配置代理后,一定要重启项目 否则无效或404】】】】】】】】】】】】】】】】】 proxy: { //【【【【【【【【【【【【【【【 注意修改和配置代理后,一定要重启项目 否则无效或404】】】】】】】】】】】】】】】】】 // 配置多个代理 '/chc-shop': { target: 'https://www.bilibili.cn', //这里的是.cn还是.com 只会影响你本地启动项目时候会调用哪个数据库的数据,而不会影响测试和线上环境调用对应的接口的。(一般都是本地调用.cn;等本地需要调试线上bug时候,改成.com重启项目看线上bug) changeOrigin: true, //是否跨域 secure: false, //如果是https请求 需要设置为true logLevel: 'debug', //ws: true,//是否要代理 websocket }, // 此处若使用 "/api1" 类似命名可能会导致请求时只截取api部分接口出现404错误,因此命名时尽量避免此类命名方式。 // 既命名不要相似 有/api 就不要再出现/api2 '/myapi': { target: 'https://www.bilibili.cn', //接口域名 changeOrigin: true, //是否跨域 secure: false, //如果是https请求 需要设置为true logLevel: 'debug', //ws: true,//是否要代理 websocket pathRewrite: { // 路径重写--意思就是遇到路径有 /myapi 的,就重写成 / 了。具体是重新写成 / 还是 /myapi看你自己的路径。 '^/myapi': '/' //(如果你的路径没有公共部分 那代理就这么写 vue页面请求的地址前需要自己拼接上 /myapi/后端接口 ) // '^/myapi': '/myapi' //(好比你的很多路径都是有公共部分 例如 /myapi/xx/xxx类型的,那代理就需要这么写或者直接不写pathRewrite这部分) } }, }, }, chainWebpack: config => { config.resolve.alias .set('@', resolve('src')) .set('common', resolve('src/common')) .set('utils', resolve('src/utils')) }}

一、 重点注意事项:

vue.config.js配置proxy代理解决跨越;proxy代理报404;(vueconfigjs配置proxy 无效)

1.配置了proxy代理,修改内容后:一定要重启项目 一定要重启项目 一定要重启项目 一定要重启项目 一定要重启项目,否则无效或者报错404.还有就是不要出现’/api’ 和’/api2’这样相似的,这样只会生效一个!!!

2.proxy可以配置多个代理。 2.1例如:我的接口很多都是/chc-shop/a1/xxx /chc-shop/a2/xxx这样的,也就是有公共部分/chc-shop。 那么就可以配置成如下代理

//【【【【【【【【【【【【【【【 注意修改和配置代理后,一定要重启项目 否则无效或404】】】】】】】】】】】】】】】】】 proxy: { // 配置公共代理 '/chc-shop': { target: 'https://www.zhbbroker.cn', //这里的是.cn还是.com 只会影响你本地启动项目时候会调用哪个数据库的数据,而不会影响测试和线上环境调用对应的接口的。(一般都是本地调用.cn;等本地需要调试线上bug时候,改成.com重启项目看线上bug) changeOrigin: true, //是否跨域 secure: false, //如果是https请求 需要设置为true logLevel: 'debug', //ws: true,//是否要代理 websocket }, },

同时vue页面的请求地址就是这样:

2.2例如:如果接口没有公共部分,那么就需要写pathRewrite,同时将代理的地址重写为’/'; pathRewrite的意思路径重写。意思就是遇到路径有 /myapi 的,就重写成 / 了。具体是重新写成 / 还是 /myapi看你自己的路径。 好比后端的请求地址是 /php2/mobile/login_verify_code.php,那么我需要单独写一个/php2去代理,

目标地址为:https://www.bilibili.com/php2/mobile/login_verify_code.php代码中请求的地址为: /php2/mobile/login_verify_code.php本地发送请求的地址为:http://localhost:8080/php2/mobile/login_verify_code.php线上被proxy替换为实际请求地址: https://www.bilibili.com/php2/mobile/login_verify_code.php//【【【【【【【【【【【【【【【 注意修改和配置代理后,一定要重启项目 否则无效或404】】】】】】】】】】】】】】】】】 proxy: { '/php2': { target: 'https://www.zhbbroker.cn', //接口域名 changeOrigin: true, //是否跨域 secure: false, //如果是https请求 需要设置为true logLevel: 'debug', //ws: true,//是否要代理 websocket }, },

同时vue请求页面

三、总结: 配置代理一定要重启项目,否则会无效或者404 是否写pathRewrite,取决与后端给的接口是不是有公共的url部分,有的话可以不写;无的话自己配置个/myapi拼接在后端的url上,同时要将pathRewrite重写为 /

另一个参考

本文链接地址:https://www.jiuchutong.com/zhishi/289643.html 转载请保留说明!

上一篇:微前端:qiankun的五种通信方式(微前端Qiankun介绍)

下一篇:天堂之路,新泽西州瓦瓦安达州立公园 (© Leembe/Getty Images)(天堂之路歌曲)

  • 增值税发票必须本人去开吗
  • 宁波财税网会计之窗官网
  • 预交增值税附税税率
  • 企业所得税预缴后亏损
  • 发票丢失了能开红字发票吗
  • 支票存根必须盖银行章吗
  • 福利费进项税转出的会计分录
  • 已投入使用的机器设备才能计提折旧对吗
  • 集体企业弊端
  • 坐收坐支在会计上如何反映
  • 混凝土委托加工税率
  • 房租抵扣个税需要提供发票吗
  • 营改增前甲供材料如何纳税
  • 安全费用中的固定资产如何写会计分录?
  • 多缴纳的附加税怎么退
  • 打官司赢了再付费叫什么
  • 项目上发生伙食问题
  • 银行收回贷款本息企业怎么做分录
  • 税费种认定功能在哪里
  • 个人所得税申报方式选哪个比较好
  • 新个税申报身份怎么填
  • 公益性捐赠专用会计科目
  • 腾讯手游助手qq版本过低
  • 事业单位自由资金怎么入账
  • 留存利润和利润的关系
  • windows 11怎么用
  • 赠品不开发票合理么
  • 二手商铺要缴纳契税吗
  • 城镇土地使用税纳税义务发生时间
  • python程序怎么看
  • PHP:imagecolorclosest()的用法_GD库图像处理函数
  • 生产企业出口货物增值税如何申报
  • laravel phpstudy
  • test指令怎么用
  • 小规模纳税人可以开增值税专用发票吗
  • 帝国cms什么语言
  • 土地补偿款会议纪要
  • sql里面union 和union all区别
  • sql2005数据库
  • 营业执照变更需要本人到场吗
  • 以摊余成本计量的债权投资与以公允价值计量且其变动
  • 一般纳税人报税流程详细操作
  • 小规模公司累计增值税
  • 转账结算的原则是什么
  • 收到个人款怎么做分录
  • 哪些费用不得计税
  • 债务利息收入
  • 应收帐款坏帐会计分录怎么处理
  • 结转库存商品需要附件吗
  • 银行询证函费用发票
  • 12月多开的发票,可以明年1月份入账吗?
  • 企业贷款利息多少
  • 分配利润给股东公司需要交税吗
  • 包工包料工程如何计税
  • 房地产企业预收账款
  • 劳务派遣中谁给劳动者发工资
  • 汽车属于固定资产吗?如何计提折旧
  • Mysql 5.7.9 shutdown 语法实例详解
  • windows7更新80072efe
  • 清除windows10登录密码
  • windows key查询
  • 操作系统安全配置一般包括哪些内容
  • vnetd.exe
  • win8.1卸载软件在哪里
  • WIN10开始菜单点不动
  • linux设置界面
  • windows8的ie浏览器在哪
  • Javascript之BOM(window对象)详解
  • 刷新页面jquery
  • jquery validator
  • 模板创造
  • linux命令及含义
  • python下读取公私钥做加解密实例详解
  • 基于python的游戏
  • 执行shell脚本方式
  • activity跳转闪退
  • unity3d项目
  • 湖南省税局
  • 为什么医保的钱可以取出来
  • 小微企业所得税5%优惠政策
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设