先看图:
图1:是直接获取数据,但是获取失败,这是典型的跨域。
图2 图3 是通过跨域配置后通过相同的接口拿到的数据。
1
2
3
接下来看看相关配置:
首先就是 在 src 下 创建一个 vue.config.js 文件,然后在文件里配置 参数:
module.exports = {
devServer: {
Proxy: {
'/api': {
target: 'http://www.xiongmaoyouxuan.com',
ws: true,
changeOrigin: true
}
}
}
}
如下图:
然后在 工具文件里去 封装 axios:
(这里我省略了线上环境和开发环境域名的判断,请求拦截,响应拦截,参数序列,优化等等,主要是测试配置跨域。)
import axios from 'axios'
const $http = axios.create({
baseURL: 'http://www.xiongmaoyouxuan.com/api', // 所有的请求地址前缀部分
})
const $get = function(url,param,fn){
$http.get(url,{params:param}).then(function(res){
fn(res.data)
}).catch(function(err){
console.log(err)
})
}
export default{$get}
如下图:
最后一步使用:
<script>
import {onMounted} from 'vue'
import api from '../../../utils/util'
export default {
setup() {
onMounted(() => {
api.$get(
"/tabs?sa=",
{},
res => {
console.log('测试', res)
}
)
})
return {}
},
}
</script>
如下图:
稳的一批,整起来