vue之数据代理详解

目录
  • 一、下面我讲的是前端人员在vue-cli中就可以完成的一种解决方式——数据代理
  • 二、上面的数据代理还是有以下缺陷的
  • 总结

解决跨域的方式有多种，例如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中的文件了

总结

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

赞 (0)

相关推荐

  • 详解Vue源码之数据的代理访问

    概念解析: 1) 数据代理: 通过一个对象代理对另一个对象(在前一个对象内部)中属性的操作(读/写) 2) vue 数据代理: 通过 vm 对象(即this)来代理 data 对象中所有属性的操作 3) 好处: 更方便的操作 data 中的数据 4) 基本实现流程 a. 通过 Object.defineProperty()给 vm 添加与 data 对象的属性对应的属性描述符 b. 所有添加的属性都包含 getter/setter c. getter/setter 内部去操作 data 中对应的

  • vue2.x 通过后端接口代理,获取qq音乐api的数据示例

    前言: 部分qq音乐的api接口不能直接通过jsonp访问,需要通过官方的代理才能获取,如:歌词,推荐歌单等 1. webpack.dev.conf.js中创建接口: // 开头调用: var express = require('express') var axios = require('axios') var app = express() var apiRoutes = express.Router() app.use('/api', apiRoutes) // devServer的最后

  • VUE的数据代理与事件详解

    VUE的数据代理与事件详解

    目录 回顾Object.defineProperty方法 何为数据代理 Vue中的数据代理 事件的基本使用 事件的修饰符 键盘事件 总结 回顾Object.defineProperty方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>回顾Object.defineproperty方法</title> </head> <

  • vue之数据代理详解

    vue之数据代理详解

    目录 一.下面我讲的是前端人员在vue-cli中就可以完成的一种解决方式--数据代理 二.上面的数据代理还是有以下缺陷的 总结 解决跨域的方式有多种,例如jsonp.cors但这两种都需要后台人员的帮助, 一.下面我讲的是前端人员在vue-cli中就可以完成的一种解决方式--数据代理 (1)首先需要在vue-cli官方文档的配置项下载一个插件 (2)将上图红圈中的部分粘贴到vue脚手架的babel.config.js中 (3)上图中红圈部分http://localhost:5000为本地服务器地

  • vue.js前后端数据交互之提交数据操作详解

    本文实例讲述了vue.js前后端数据交互之提交数据操作.分享给大家供大家参考,具体如下: 前端小白刚开始做页面的时候,我们的前端页面中经常会用到表单,所以学会提交表单也是一个基本技能,其实用ajax就能实现,但他的原始语法有点...额 ...复杂,所以这里给大家提供一种用vue-resource向后端提交数据. (1)第一步,先在template中写一个表单: <el-form :model="ruleForm" :rules="rules" ref=&quo

  • Vue之使用mockjs生成模拟数据案例详解

    Vue之使用mockjs生成模拟数据案例详解

    目录 在项目中安装mockjs 在Vue项目中使用mockjs的基本流程 Mock语法规范 数据模板定义规范(Data Template Definition,DTD) 数据占位符定义规范(Data Placeholder Definition,DPD) Mock.mock() Mock.Random() 在项目中安装mockjs 在项目目录下执行以下安装命令 npm install mockjs --save 在Vue项目中使用mockjs的基本流程 安装完成后,在项目src/utils目录下

  • Vue echarts模拟后端数据流程详解

    Vue echarts模拟后端数据流程详解

    目录 KOA2的使用 安装 Koa app.js入口文件 KOA2的使用 KOA2是由Express 原班人马打造. 环境依赖 Node v7.6.0 及以上. 支持 async 和 await 洋葱模型的中间件 写响应函数(中间件) 响应函数是通过use的方式才能产生效果, 这个函数有两个参数, ctx :上下文, 指的是请求所处于的Web容器,我们可以通过 ctx.request 拿到请求对象, 也可 以通过 ctx.response 拿到响应对象 next :内层中间件执行的入口 模拟服务

  • vue组件historyApiFallback作用详解

    vue组件historyApiFallback作用详解

    本篇博客主要是详细总结一下vue中的historyApiFallback的作用. 当我们在浏览器中输入一个网址(比如说是:http://www.edit.com),此时会经过dns解析,拿到ip地址然后根据ip地址向该服务器发起请求,服务器接受到请求之后,然后返回相应的结果(html,css,js). 如果我们在前端设置了重定向,此时页面会进行跳转到http://www.edit.com/home,在前端会进行匹配对应的组件然后将其渲染到页面上.此时如果我们刷新页面的话,浏览器会发送新的请求ht

  • 一篇Vue、React重点详解大全

    目录 Vue 生命周期 MVVM 双向绑定原理 虚拟dom v-for为什么要用key nextTick v-show.v-if的区别 vue单页面应用如何首页优化 Vue 的父组件和子组件生命周期钩子执行顺序是什么 Vue 中的 computed 是如何实现的 React 不同之处 vue和react的区别 Vue 生命周期 vue2: 总共分为8个阶段:创建前/后,载入前/后,更新前/后,销毁前/后. 创建前/后: 在beforeCreate阶段,由于还未初始化,vue实例的挂载元素el和数

  • vue模板语法-插值详解

    1.文本 数据绑定最常见的形式就是使用'Mustache'语法(双打括号)的文本插值: <span>message:{{msg}}</span> 使用v-once指令,也能执行一次性的插值,当主句改变时,插值处的内容不会更新. 但请留心这回影响到该节点上所有的数据绑定: <span v-once>this will nver change:{{message}}</span> 2.纯html 双打括号会将数据解释为纯文本,而非html.为了输出html可以使

  • vue axios用法教程详解

    axios是vue-resource后出现的Vue请求数据的插件.vue更新到2.0之后,作者尤大就宣告不再对vue-resource更新,而是推荐的axios. 下面我们来使用axios npm install axios --save-dev import axios from "axios" 这时候如果在其它的组件中,是无法使用 axios 命令的.但如果将 axios 改写为 Vue 的原型属性,就能解决这个问题 1 1.    Vue.prototype.$ajax=axio

  • vue组件与复用详解

    一.什么是组件 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码. 二.组件用法 组件需要注册后才可以使用,注册有全局注册和局部注册两种方式. 2.1 全局注册后,任何V ue 实例都可以使用.如: <div id="app1"> <my-component></my-component> </div> Vue.component('my-component',{ templ

随机推荐