vue之数据代理详解

 更新时间:2021年12月19日 16:21:52   作者:@少年啊  
这篇文章主要为大家介绍了vue之数据代理,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

解决跨域的方式有多种,例如jsonp、cors但这两种都需要后台人员的帮助,

一、下面我讲的是前端人员在vue-cli中就可以完成的一种解决方式——数据代理

(1)首先需要在vue-cli官方文档的配置项下载一个插件

在这里插入图片描述

(2)将上图红圈中的部分粘贴到vue脚手架的babel.config.js中

在这里插入图片描述

(3)上图中红圈部分http://localhost:5000为本地服务器地址,但我项目起的服务为http://localhost:8082/

此时我在项目中向后台发送请求

在这里插入图片描述

就能够获取数据了

在这里插入图片描述

注意要是你项目中punlic文件夹有和本地服务器相同名称的文件,那将会优先在项目中public文件夹读取

二、上面的数据代理还是有以下缺陷的

(1)本地public中有和服务器文件名相同的,会优先返回本地的

(2)只能创建单个代理

1、为了解决以上问题,可以采用另外一种创建代理的方式

在这里插入图片描述

上图/api和/apii为两个不同的数据代理

2、同时前端发送请求的接口路径也要进行更改,由http://localhost:8082/students改为以下,这样写就不会请求本地public中的文件了

在这里插入图片描述

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!

相关文章

  • 关于@click.native中 .native 的含义与使用方式

    关于@click.native中 .native 的含义与使用方式

    这篇文章主要介绍了关于@click.native中 .native 的含义与使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue实现跨页面定位锚点区域方式

    vue实现跨页面定位锚点区域方式

    这篇文章主要介绍了vue实现跨页面定位锚点区域方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • vue实现电子时钟效果

    vue实现电子时钟效果

    这篇文章主要为大家详细介绍了vue实现电子时钟效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • Vue组件库ElementUI实现表格列表分页效果

    Vue组件库ElementUI实现表格列表分页效果

    这篇文章主要为大家详细介绍了Vue组件库ElementUI实现表格列表分页效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • Vue使用axios出现options请求方法

    Vue使用axios出现options请求方法

    这篇文章主要介绍了Vue使用axios出现options请求,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • vue中注册组件的两种方式详解(全局注册&& 局部注册)

    vue中注册组件的两种方式详解(全局注册&& 局部注册)

    vue 是一个完全支持组件化开发的框架, 组件之间可以进行相互的引用,这篇文章主要介绍了vue中注册组件的两种方式详解(全局注册&& 局部注册),需要的朋友可以参考下
    2023-06-06
  • vue实现带缩略图的轮播图效果

    vue实现带缩略图的轮播图效果

    这篇文章主要为大家详细介绍了如何使用vue实现带缩略图的轮播图效果,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的可以参考下
    2024-02-02
  • Vue elementUI 自定义表单模板组件功能实现

    Vue elementUI 自定义表单模板组件功能实现

    在项目开发中,我们会遇到这种需求,在管理后台添加自定义表单,在指定的页面使用定义好的表单,这篇文章主要介绍了Vue elementUI 自定义表单模板组件,需要的朋友可以参考下
    2022-12-12
  • vue props传值失败 输出undefined的解决方法

    vue props传值失败 输出undefined的解决方法

    今天小编就为大家分享一篇vue props传值失败 输出undefined的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue element upload实现图片本地预览

    vue element upload实现图片本地预览

    这篇文章主要为大家详细介绍了vue element upload实现图片本地预览,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-08-08

最新评论