位置: 编程技术 - 正文

vue解决跨域路由冲突问题思路解析(vue如何处理跨域)

编辑:rootadmin

推荐整理分享vue解决跨域路由冲突问题思路解析(vue如何处理跨域),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue怎么解决跨域,vue怎么解决跨域,vue跨域问题的三种解决方案,vue跨域问题的三种解决方案,vue跨域配置路径,vue 跨域解决,vue跨域配置路径,vue跨域配置路径,内容如对您有帮助,希望把文章链接给更多的朋友!

vue 简介

Vue.js(读音 /vju&#;/, 类似于 view) 是一套构建用户界面的渐进式框架。

Vue 只关注视图层, 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue 学习起来非常简单,本教程基于 Vue 2.1.8 版本测试。

当我们在路由里面配置成以下代理可以解决跨域问题

这种配置方式在一定程度上解决了跨域问题,但是会带来一些问题,

比如我们的vue 路由 也命名为 goods,这时候就会产生了冲突,

如果项目中接口很多,都在这里配置是很麻烦的,也容易产生路由冲突。

正确的姿势

如果把所有的接口,统一规范为一个入口,在一定程度上会解决冲突

把以上配置统一前面加上 /api/

如果我们配置成这种方式,在使用http请求的时候就会发生变化,会在请求前面加上一个api,相对路由也会发生变化,也会在接口前面加上api,这样也会很麻烦,我们可以使用以下方式来解决这个问题

上面这个代码,就是把咱们虚拟的这个api接口,去掉,此时真正去后端请求的时候,不会加上api这个前缀了,那么这样我们前台http请求的时候,还必须加上api前缀才能匹配到这个代理,代码如下:

我们可以利用axios的baseUrl直接默认值是 api,这样我们每次访问的时候,自动补上这个api前缀,就不需要我们自己手工在每个接口上面写这个前缀了

在入口文件里面配置如下:

如果这配置 ‘api/' 会默认读取本地的域

上面这样配置的话,不会区分生产和开发环境

vue解决跨域路由冲突问题思路解析(vue如何处理跨域)

在config 文件夹里面新建一个 api.config.js 配置文件

然后在main.js 里面引入,这样可以保证动态的匹配生产和开发的定义前缀

经过上面配置后,在dom里面可以这样轻松的访问,也不需要在任何组件里面引入axios模块了。

最终代码

在代理里面配置

在config里面的api.config.js 配置

在config 文件夹里面新建一个 api.config.js 配置文件

关于生产和开发配置不太了解

可以去 dev-server.js 里面看配置代码

在main.js 入口文件里面配置

在dom里面请求api的姿势

PS:下面通过一段代码学习下vue下跨域设置

1、在使用vue开发的时候经常要涉及到跨域的问题,其实在vue cli中是有我们设置跨域请求的文件的。

2、当跨域无法请求的时候我们可以修改工程下config文件夹下的index.js中的dev:{}部分。

将target设置为我们需要访问的域名。

3、然后在main.js中设置全局属性:

4、至此,我们就可以在全局使用这个域名了,如下:

总结

以上所述是小编给大家介绍的vue解决跨域路由冲突问题思路解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对积木网网站的支持!

AngularJS中controller控制器继承的使用方法 前沿最近在angularjs项目当中,看到controller好多都是重复性的代码,在controller当中有好多代码很相似function(比如controller下的CRUD方法),重复性工作太

angular中ui calendar的一些使用心得(推荐) uicalendar是封装fullcalendar的一款angular指令插件官方地址:

关于Vue背景图打包之后访问路径错误问题的解决 案例环境通过vue-cli脚手架创建的vue项目在项目打包的时候遇到了背景图片路径出错的问题,经过谷歌一番,发现是在配置的时候对图片的限制大小过小

标签: vue如何处理跨域

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

上一篇:基于angular-utils-ui-breadcrumbs使用心得(分享)(基于stm32的100个毕业设计)

下一篇:AngularJS中controller控制器继承的使用方法

  • 资源税和增值税销售额不一致
  • 其他债权投资的交易费用计入哪里
  • 企业所得税税前扣除政策
  • 出口报关单运费小于实际运费
  • 利息调整的计算公式
  • 个体户一个月能领多少发票
  • T3现金流量表怎么删除
  • 收到生育津贴会计分录怎么做
  • 资金成本加价收入能作为收入开票吗
  • 当买方违约时,卖方可以得到哪些补救?
  • 辅导期一般纳税人和一般纳税人的区别
  • 房地产开发临时用电
  • 如果增值税发票丢了好的怎么办有谁交罚熬一
  • 土地增值税清算是什么意思
  • 对公业务指什么
  • 差额征税的小微企业免税销售额
  • 有子公司一定要交社保吗
  • 退税勾选后怎么申报
  • 销售应税消费品应交的消费税分录
  • 公司入职员工
  • 党员经费的使用范围
  • 财务科目明细表格模板
  • 哪里查询发票是否抵扣
  • 企业销售食品过期处罚
  • 电梯维保公司缴税标准
  • doc文档隐藏
  • win10右键显示设置打不开怎么办
  • bellzee.exe是什么
  • PHP:Memcached::addServers()的用法_Memcached类
  • vue-html
  • 结转结余会计分录
  • 商铺出租各类收据怎么写
  • 现金流方法
  • PHP:jdtojewish()的用法_日历函数
  • 什么是收付实现制?什么是权责发生制?
  • 精确控制 英文
  • phpseclib
  • es6 promise await
  • 残保金解决方案
  • vgremove命令
  • discuz去除底部
  • 13个点的普票可以抵税吗
  • Mysql半同步复制原理及问题排查
  • mysql查询表里数据
  • 供货商少开发票金额如何进行会计处理?
  • 哪些无票费用能够抵扣所得税
  • 研发增值税税率怎么算
  • 只收加工费
  • sqlserver最大数据量
  • 损益类科目都是当期损益吗
  • 出纳与会计现金的区别
  • 增值税专用发票有几联?
  • 未完工属于什么科目
  • 进项税已入账未认证申报表怎么填
  • 企业跨年度的收入退回应该如何进行会计处理?
  • 收单清算款计入什么费用
  • 基本户怎么提现金
  • 红字冲账的记账凭证
  • 税局代开的法律顾问费能否抵扣?
  • 预收账款转收入的条件
  • 合同取得成本如何收回
  • 公司汽车上牌费用多少
  • 支付宝里的收入和支出明细能查多久的?
  • 访问和更改关系的区别
  • win8.1无法进入系统
  • win7修改系统版本
  • window照片无法预览
  • win8.1企业版激活密钥最新
  • linux系统中
  • mac safari浏览历史
  • linux的特殊权限
  • 判断输入的日期是一年中第几天
  • 细说java
  • android事件响应和处理机制
  • 孙其功陪你学之——unity3d进程暂停
  • jquery通过id赋值
  • 如何查询税务情况
  • 电子税务局怎么添加开票员
  • 洗煤与选煤
  • 2022年房产税减免政策疫情
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设