位置: IT常识 - 正文

Vue2 跨域问题报错AxiosError net::ERR_FAILED、 Network Error、ERR_NETWORK(vue2.0解决跨域问题)

编辑:rootadmin
Vue2 跨域问题报错AxiosError net::ERR_FAILED、 Network Error、ERR_NETWORK

推荐整理分享Vue2 跨域问题报错AxiosError net::ERR_FAILED、 Network Error、ERR_NETWORK(vue2.0解决跨域问题),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue跨域问题解决,vue跨域问题的三种解决方案,vue处理跨域问题,vue的跨域问题,vue2解决跨域问题,vue跨域问题解决,vue跨域问题解决,vue2.0解决跨域问题,内容如对您有帮助,希望把文章链接给更多的朋友!

请求场景: 当前页面URL:http://127.0.0.1:8000/testcase 跳转请求页面URL:http://127.0.0.1:5000/testcase_orm 使用axios请求 时 页面提示跨域报错

跨域报错信息

Access to XMLHttpRequest at ‘http://127.0.0.1:5000/testcase_orm’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

AxiosError {message: ‘Network Error’, name: ‘AxiosError’, code: ‘ERR_NETWORK’

Vue2 跨域问题报错AxiosError net::ERR_FAILED、 Network Error、ERR_NETWORK(vue2.0解决跨域问题)

Vue2跨域问题报错截图 通过对代码以及报错信息分析,问题出现在跨域请求上,(跨域请求:跨域是指浏览器不允许当前所在的源请求去访问另一个不一样的源请求,源是指请求协议、域名、端口号,这三个如果有一个不一致就是跨域请求)

当前URL请求URL是否跨域结果分析http://www.kuakuakua.comhttp://www.kuakuakua.com/index.html否同源(域名、协议、端口号一致)http://www.kuakuakua.comhttps://www.kuakuakua.com跨域协议不同(http/https)http://www.kuakuakua.comhttp://www.javashuo.com/跨域域名不同(www.kuakuakua.com/www.javashuo.com)http://www.kuakuakua.com:8080http://www.kuakuakua.com:8081跨域端口号不同(8080/8081)

解决方法

步骤一:在项目目录下找到 vue.config.js 文件打开编辑

步骤二:按照图中的结构,将给出的代码复制到 module.exports 中

devServer: { proxy: { "/proxy_url":{ // /proxy_url 这个用来和根路径 baseURL 进行匹配 target: 'http://127.0.0.1:5000', // 这个是填写跨域的请求域名+端口号,也就是要请求的URL(不包含URL路径) changeOrigin: true, // 是否允许跨域请求,在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题 pathRewrite: { // 路径重写 '^/proxy_url': '/' // 替换target中的请求地址,原请求为 http://127.0.0.1:8000/kuayu 实际请求为 http://127.0.0.1:8000/proxy_url/kuayu } } } }步骤三:找到main.js文件,将axios.defaults.baseURL 设置为 /proxy_urlaxios.defaults.baseURL = ‘/proxy_url’步骤四:然后xxx.vue文件中的methods中的axios请求正常使用就可以了 此处的完整请求URL是 http://127.0.0.1:5000/testcase_orm(步骤四只是提供一个示例,具体的请求URL按照自己项目的URL去请求)methods:{ getCaseList: function(){ console.log("xxxxxxxxx") console.log('查看接口调用是否成功') this.$axios.get('/testcase_orm').then((result)=>{ console.log('查看接口调用是否成功,被调用则成功') console.log(result) }) } }

解决方法解析: 跨域问题,可以让服务端去添加请求头字段信息以及允许跨域访问,服务端的跨域问题不在本文章描述,感兴趣可以去看博主的另一篇Django跨域问题解决的博文

vue跨域问题本次使用的是代理方案进行解决,通过本地服务器进行代理转发到目标服务器,跨域只针对浏览器,对于node服务发出的请求时不会出现跨域问题,从而解决浏览器跨域问题。

感谢观看,希望对读者有所帮助,有疑问可以评论,不定时回复

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

上一篇:雷尼尔山上空的银河星系,美国华盛顿州 (© Brad Goldpaint/Cavan)(雷尼尔国家公园攻略)

下一篇:webpack--》webpack底层深入讲解,从初识到精通,真正实现从0到1的过程

  • excel底纹怎么设置(excel底纹怎么设置12.5%的灰色)

    excel底纹怎么设置(excel底纹怎么设置12.5%的灰色)

  • 抖音添加的心愿单在哪里(抖音添加的心愿怎么删除)

    抖音添加的心愿单在哪里(抖音添加的心愿怎么删除)

  • 华为用airpods怎么显示电量(华为用airpods怎么开弹窗吗)

    华为用airpods怎么显示电量(华为用airpods怎么开弹窗吗)

  • 苹果x原彩显示不见了(苹果x原彩显示在哪里)

    苹果x原彩显示不见了(苹果x原彩显示在哪里)

  • 能视频聊天的软件有哪些(能视频聊天的软件都有什么直播)

    能视频聊天的软件有哪些(能视频聊天的软件都有什么直播)

  • 苹果11拍照什么水平(苹果拍照什么软件最好看)

    苹果11拍照什么水平(苹果拍照什么软件最好看)

  • 抖音怎么看哪里违规了(抖音怎么看哪里违规了记录)

    抖音怎么看哪里违规了(抖音怎么看哪里违规了记录)

  • 导航卫星的作用是什么(导航卫星的作用是答案)

    导航卫星的作用是什么(导航卫星的作用是答案)

  • 微信标签群发怎么全选(微信标签群发怎么能发送链接)

    微信标签群发怎么全选(微信标签群发怎么能发送链接)

  • photoshop是一种什么软件(photoshop属于什么软件?)

    photoshop是一种什么软件(photoshop属于什么软件?)

  • 华为手机膜免费换吗(华为手机膜免费贴多久)

    华为手机膜免费换吗(华为手机膜免费贴多久)

  • icloud怎么用恢复数据(icloud怎么恢复出厂设置)

    icloud怎么用恢复数据(icloud怎么恢复出厂设置)

  • 小米9pro公交卡怎么用(小米9公交卡怎么唤出)

    小米9pro公交卡怎么用(小米9公交卡怎么唤出)

  • 华为nova5pro怎么截长图(华为nova5pro怎么升级鸿蒙系统)

    华为nova5pro怎么截长图(华为nova5pro怎么升级鸿蒙系统)

  • 为什么微信设置了免打扰还是会响铃(为什么微信设置了铃声 来电还是原来的)

    为什么微信设置了免打扰还是会响铃(为什么微信设置了铃声 来电还是原来的)

  • 荣耀stfal10啥型号(荣耀stf-al10)

    荣耀stfal10啥型号(荣耀stf-al10)

  • 简述数据预处理的作用(简述数据预处理方法有哪些各有什么作用)

    简述数据预处理的作用(简述数据预处理方法有哪些各有什么作用)

  • cardreader插主板哪里(读卡器主板)

    cardreader插主板哪里(读卡器主板)

  • 学习强国怎么激活

    学习强国怎么激活

  • 抖音怎么把视频和照片剪辑在一起(抖音怎么把视频放慢速度)

    抖音怎么把视频和照片剪辑在一起(抖音怎么把视频放慢速度)

  • iphone便捷访问的作用是什么(苹果手机的便捷访问功能有什么用)

    iphone便捷访问的作用是什么(苹果手机的便捷访问功能有什么用)

  • qq申诉不成功(qq申诉不成功怎么找人工客服)

    qq申诉不成功(qq申诉不成功怎么找人工客服)

  • 小窝中安睡的欧亚红松鼠,苏格兰高地 (© Neil Anderson/Minden Pictures)(安个小窝)

    小窝中安睡的欧亚红松鼠,苏格兰高地 (© Neil Anderson/Minden Pictures)(安个小窝)

  • 旅客运输服务解释
  • 职工薪酬实际金额包括发放往年工资吗
  • 未达起征点销售额和小微企业免税销售额
  • 购买电脑的折旧怎么计算
  • 实验室报销发票
  • 房地产开发企业预缴增值税
  • 临时员工和正式员工区别
  • 租赁的房子
  • 化妆品的成本利润是多少
  • 财政补贴是什么
  • 企业清算时未抵扣的进项税账务处理
  • 跨月销项负数发票怎么做账
  • 客户退回发票会退回吗
  • 工厂出租厂房税率
  • 生产车间员工体检费怎么入账
  • 学生兼职需要交什么税
  • 处置子公司合并抵消
  • 建筑企业法定代表人和建筑公司资质不是一个人
  • 折旧计算所得税吗
  • 递延收益在现金流量表体现吗
  • 自购销售和委托代购
  • 法人往公户打款是实收资本还是借款
  • 使用ps能完成的操作有哪些
  • 餐饮的成本核算表格模板
  • 合同作废印花税法规定
  • 附加税要先计提再支付吗
  • 固定资产可以一次性抵扣进项税吗
  • 几个项目可以合到一起招标吗
  • 网络环境中存在不同网段的nvr
  • 销售产品取得收入4500万元
  • 公司为员工交的社保比例
  • 社保包括哪些保险及比例
  • 职工薪酬纳税调整明细表案例
  • php+mysql+ajax实现单表多字段多关键词查询的方法
  • 允许加计扣除的委托境外研发费用
  • 股东分红应该在哪个科目
  • c++简易游戏
  • 未达起征点销售额是含税还是不含税
  • 小规模企业出售汽车如何交税
  • 客户要发票加收怎么办
  • 前端动画库
  • 生育津贴如何做帐
  • 限额领料单属于什么凭证
  • 房产出租税率是多少
  • 待报解预算收入是什么意思,扣了钱
  • 汇算清缴如何调报表
  • 管理费用包含研发费用需要减吗?
  • 暂估入库的库存商品转成本吗
  • 佣金和其他费用
  • 保证金计算器
  • 公司代缴的社保能不能取出来
  • 合并报表非同控为什么调公允
  • 进项转出再转入
  • 交通运输业营改增
  • 发票报销可以跨月报销吗
  • 账本结转下年怎么划线
  • 外账进销存单据是怎么弄的?
  • 农产品加计扣除10%进项税账务处理
  • 无形资产摊销如何记账
  • 2018年水利建设基金税率
  • 会计怎么做的
  • sql常用语句大全 实例
  • sqlserver存储过程if语句
  • linux必学的100个命令
  • 如何修改centos7的workspace name
  • win7系统如何提升开关机速度
  • 在mac中该如何共享文件夹
  • w8系统文件夹怎么设置密码
  • WIN10系统打开IE浏览器断网
  • 跑跑跑游戏
  • pcl读取ply文件
  • adt Failed to create the Java Virtual Machine.
  • 虚拟现实国内做的最好的
  • linux如何批量执行脚本
  • 基于unity的游戏开发
  • 用AutoCompleteTextView实现自动提示
  • python libnum
  • 发票怎样读入金税开票系统
  • 责令立即改正和责令限期整改
  • steam 申请
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设