在构建web项目的时候,我们难免会采用前后端分离的架构去进行项目,那么问题来了,在前端代码没有和后端打包时,我们如何获取数据,测试数据,这里就要运用到跨域了,本文介绍vue项目中的跨域方法。



在vue项目中我们通常使用Axios来进行数据请求,Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中,而vue所构建的项目也算基于npm来构建,因此让我们先来安装一下Axios。

进入到vue项目下,执行下面这行指令
npm install --save axios

这样axios就自动添加到我们的项目依赖里面了。然后我们打开项目。执行以下过程:

1、首先进入main.js,第一步当然是导入我们的axios文件了,然后定义一个变量挂载到Vue原型

这里写图片描述

2、第二步需要注意一下,我们需要修改config目录下的index.js文件,改成下图所示:

这里写图片描述
3、接下来就是使用过程了:

这里写图片描述

4、最后大家看一看豆瓣API返回的数据:

这里写图片描述


最后说一下有几点需要注意

1.Vue.prototype.HOME中的HOME是一个固定值,默认指向localhost,如果我们修改成为别的变量,会报错,比如修改成Vue.prototype.API,系统会报错,因为地址不对。那如果我们想自定义怎么办,很简单,Vue挂载变量需要加个dollar符,你改成Vue.prototype.$api就OK了。

2.第二点是特别需要注意的地方,我曾经坑过自己好几次,希望大家着重看一下。在Vue项目中如果我们修改了config里面的文件,请千万要重新启动项目,重新启动项目,重新启动项目,不然一定会报错。

Logo

前往低代码交流专区

更多推荐