位置: 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)(天堂之路歌曲)

  • 小爱同学play和小爱同学AI区别(小爱同学play和二代哪个好)

    小爱同学play和小爱同学AI区别(小爱同学play和二代哪个好)

  • 美团拒单什么时候才能恢复(美团拒单什么时候退款)

    美团拒单什么时候才能恢复(美团拒单什么时候退款)

  • t2000显卡什么水平(t20004g显卡)

    t2000显卡什么水平(t20004g显卡)

  • 搜狗输入法标点符号半角怎么设置(搜狗输入法标点符号顺序)

    搜狗输入法标点符号半角怎么设置(搜狗输入法标点符号顺序)

  • 18650和21700的区别(18650和21700电池有什么区别)

    18650和21700的区别(18650和21700电池有什么区别)

  • 24v有源无源区别(有源24v和无源24v有什么区别)

    24v有源无源区别(有源24v和无源24v有什么区别)

  • 华为手机主屏时间天气没有了怎么办(华为手机主屏时间不见了)

    华为手机主屏时间天气没有了怎么办(华为手机主屏时间不见了)

  • nfc功能是什么意思(nfc功能是什么意思oppo手机)

    nfc功能是什么意思(nfc功能是什么意思oppo手机)

  • dv和hdv区别(dvpal和hdv区别)

    dv和hdv区别(dvpal和hdv区别)

  • 京东退货优惠券退么(京东退货优惠券会退回吗)

    京东退货优惠券退么(京东退货优惠券会退回吗)

  • win7电脑设置在哪里找(电脑win7设置在哪里)

    win7电脑设置在哪里找(电脑win7设置在哪里)

  • oppoace防抖吗(oppo ace2拍照防抖)

    oppoace防抖吗(oppo ace2拍照防抖)

  • 华为nova5有没有超广角(华为Nova5有没有红外线)

    华为nova5有没有超广角(华为Nova5有没有红外线)

  • vue拍视频怎么加文字(vue如何在视频中加图片)

    vue拍视频怎么加文字(vue如何在视频中加图片)

  • 如何开通微信服务号(如何开通微信服务功能)

    如何开通微信服务号(如何开通微信服务功能)

  • 键盘上prtsc是什么意思(键盘上prscrn是哪个键)

    键盘上prtsc是什么意思(键盘上prscrn是哪个键)

  • 无忧行怎么激活(无忧行会员怎么购买)

    无忧行怎么激活(无忧行会员怎么购买)

  • 如何将PDF文件转换成WORD(如何将PDF文件转成高清图片)

    如何将PDF文件转换成WORD(如何将PDF文件转成高清图片)

  • 小米8充电时间(小米充电时间记录)

    小米8充电时间(小米充电时间记录)

  • oppo手机流量监控在哪(oppo手机流量监控在哪里设置)

    oppo手机流量监控在哪(oppo手机流量监控在哪里设置)

  • 手机远程监控摄像头的安装操作(手机远程监控摄像头掉线怎么连接)

    手机远程监控摄像头的安装操作(手机远程监控摄像头掉线怎么连接)

  • 为什么陌陌发不出信息(为什么陌陌发不出去照片)

    为什么陌陌发不出信息(为什么陌陌发不出去照片)

  • 什么是DNS?Win11/10上的DNS问题解决方法汇总(什么是馥芮白)

    什么是DNS?Win11/10上的DNS问题解决方法汇总(什么是馥芮白)

  • 手把手教你实现一个JavaWeb项目:创建一个自己的网页博客系统(前端+后端)(一)(手把手教你实现用户登录界)

    手把手教你实现一个JavaWeb项目:创建一个自己的网页博客系统(前端+后端)(一)(手把手教你实现用户登录界)

  • Autoware入门到精通(auto系列软件)

    Autoware入门到精通(auto系列软件)

  • 浅识WebGL和Three.js(webgl1.0)

    浅识WebGL和Three.js(webgl1.0)

  • 记账王怎么查询凭证
  • 税控盘解锁是什么意思
  • 建筑公司成本发票不够
  • 土地转让合同也叫什么
  • 赊销现金折扣分录
  • 非居民工资薪金个人所得税计算方法
  • 合并会计报表长期股权投资
  • 消费税在流通环节征税吗
  • 生产过程中报废怎么核算成本
  • 小规模公司退税
  • 资本公积转增股本什么意思
  • 收购农产品销售会计分录怎么写
  • 政府机构可以开对外营业的餐饮吗
  • 广告宣传费可以抵扣进项税吗
  • 报废固定资产收入计入什么科目
  • 两个公司领工资会不会合并纳税
  • 网络综合布线开关在哪
  • 中小五金企业如何进行成本核算
  • 事业单位去年的岗位今年还会招吗
  • 无形资产管理的基本流程包括无形资产的
  • 工程质保金扣除
  • 未分配利润转入本年利润
  • 支付销售产品的保险费计入什么科目
  • 在windows七中
  • 考勤扣款怎么算
  • 小商业企业应交所得税
  • explorer.exe是啥意思
  • linux命令使用
  • 外资企业股权转让给外资企业
  • smart图形怎么单独设置动画
  • 发票金额与银行付款金额少几分钱
  • 集团公司内部结构是什么
  • php获取文件名后缀
  • mysql.php
  • 什么叫含税和未含税区别
  • Element UI - v-infinite-scroll无限滚动组件
  • 数据库锁面试题
  • 模型参数是什么意思
  • 公司的财务报表能看出什么
  • 个人综合所得汇算申报流程
  • cookie 会话
  • sql server ssrs
  • 总分机构纳税
  • MySQL默认字符集修改
  • sql server查询语句大全讲解
  • 公积金个人缴纳和公司缴纳比例
  • 阶段性减免企业社保费实施政策对象
  • 员工多交个税企业就少交所得税吗?
  • 应收票据的核算范围包括
  • 计提福利费是什么意思
  • 劳务费无发票怎么处理
  • 企业所得税季报与年报的关系
  • 4s店出售试驾车的增值税是多少
  • 房地产开发企业销售自行开发的房地产项目
  • 上年未结转金额是什么意思
  • 没有销售收入月报怎么填
  • 有存货的公司
  • sql语句实现查询示例
  • sql union和join区别
  • mysql数据库基础与实践课后答案
  • freebsd使用
  • 哪个是win8.1更新win10的补丁
  • win9系统
  • 解析包出现错误无法安装怎么办
  • vmware 10虚拟机
  • 小黑马科技
  • windows 10 周年更新
  • centos libcrypto.so.1.0.0
  • 怎样把系统及软件迁移到固态
  • WIN10系统安装.net报错0x80072f8F
  • jQuery实现非常实用漂亮的select下拉菜单选择效果
  • opengl编程实例
  • JavaScript运算符中谁拥有最高优先级
  • 批处理技术有哪些
  • js的点击事件怎么做
  • Android spinner 的使用
  • 用python发邮件
  • javascript获取值
  • jquery 异步提交表单
  • 电子税务局网上实名认证流程
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设