方法一
使用JSONP
安装方法:
npm i -S vue-jsonp
导入
在main.js中引用vue-jsonp
import VueJsonp from 'vue-jsonp'
Vue.use(VueJsonp)
复制代码
接下来就可以使用啦
this.$jsonp('https://api.douban.com/v2/book/1220562',
//豆瓣api
{
//请求参数
} ).then(json => {
console.log(json)
//返回json
}).catch(err => {
 console.log(err)
})
复制代码
方法二
配置
那么如果不使用JSONP,而是使用axios呢?
找到目录下config文件夹下的index.js
并添加以下代码
proxyTable: {
'/api': {
target: 'https://api.douban.com/',
//豆瓣api
changeOrigin:true,
pathRewrite: {
'^/api': ''
}
}
使用
this.$axios
.post("api/v2/book/1220562", {
//打包之前修改为 .post("https://api.douban.com/v2/book/1220562",
{
//请求参数
})
.then(function(response) {
console.log(response);
})
.catch(function(error) {
console.log(error);
});
vue2.0实现跨域的方法有哪些
最新推荐文章于 2023-07-05 22:48:25 发布
本文介绍了两种在Vue项目中获取豆瓣API数据的方法。第一种是通过引入vue-jsonp库,实现JSONP请求。在main.js中安装并使用VueJsonp插件,然后调用$jsonp方法进行请求。第二种方法是配置axios,通过设置proxyTable代理解决跨域问题,直接使用$axios.post发送请求。详细步骤包括修改config/index.js文件,设置目标URL和路径重写。
摘要由CSDN通过智能技术生成