axios get怎么还会显示跨域_Vue--封装axios、跨域

封装axios

因为项目中很多组件中要通过Axios发送异步请求，所以封装一个Axios对象。自己封装的Axios在后续可以使用axios中提供的拦截器。

在src下创建一个utils目录，在utils目录下创建一个request.js文件

在public下创建一个db.json文件，写点数据，用来我们测试

之前我们使用axios发送请求的时候是使用的下面的方式

[

{"name":"张三","age":17},

{"name":"李四","age":52},

{"name":"王五","age":37}

]

db.json

import axios from 'axios'axios.get('./db.json').then(response =>{

console.log(response.data)

})

在components下的HelloWorld.vue中引用测试一下

在浏览器 的控制台就可以看到db.json里的数据，这种方法是我们之前的方法，现在我们要封装。

修改request.js文件

import axios from 'axios'const request=axios.create({

baseURL:'/', //基础路径,根据不同环境设置 baseURL, 最终发送请求时的URL为: baseURL + 发送请求时写URL ,

timeout: 5000 //超时时间，5000毫秒

})exportdefault request //导出自定义的axios对象

我们自己封装好了axios，那怎么测试知道我们封装的有没有问题，我们来进行测试

在src目录下创建一个api目录，在下面创建一个test.js文件

在test.js文件里写入如下代码

//@就是src目录的路径

import request from '@/utils/request'

//下面的这种是使用最原始的方式来发送get请求//request.get('/db.json').then(response =>{//console.log(response.data)//})