vue中axios调用接口和用node.js跨域
<script>
const API_PROXY = 'https://bird.ioliu.cn/v1/?url='
import axios from 'axios'
export default {
name: 'hello',
data () {
return {
msg: 'vue调用网易云接口',
author: '泥猴啊',
musics: []
}
},
mounted: function () {
var _this = this
axios.get(API_PROXY + 'http://music.163.com/api/playlist/detail?id=19723756')
.then(function (res) {
_this.musics = res.data.result.tracks
console.log(_this.musics)
}, function (error) {
console.log(error)
})
}
}
</script>
同样的我们新建一个Node.vue
的模板和/node
的路由
{
path: '/node',
name: 'Node',
component: Node
}
index.js 完整代码
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Node from '@/components/Node'
import VueResource from 'vue-resource'
Vue.use(Router)
Vue.use(VueResource)
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello
},
{
path: '/node',
name: 'Node',
component: Node
}
]
})
设置代理
打开config/index.js
修改proxyTable: {}
部分
修改为
proxyTable: {
'/api': {
target: 'http://music.163.com/api',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
第一行的'/api'
指的是虚拟路径
target指的是目标地址,也就是实际api的地址
pathRewrite规则重写
然后在代码页面修改一下请求地址
mounted: function () {
this.$http.get('/api/playlist/detail?id=19723756', {}, {
headers: {
},
emulateJSON: true
}).then(function (res) {
this.musics = res.data.result.tracks
console.log(this.musics)
}, function (error) {
console.log(error)
})
}
/api/playlist/detail?id=19723756
上面的这个地址其实就等于http://localhost:8080/api
+/playlist/detail?id=19723756
注意这里一定要重启一下node,因为你修改了node的配置一定要重启才能生效
在命令符窗口ctrl + c
然后重新执行cnpm run dev
这时候,命令窗口会提示
[HPM] Proxy created: /api -> http://music.163.com/api
[HPM] Proxy rewrite rule created: "^/api" ~> ""
> Starting dev server...
说明代理成功
然后访问http://localhost:8080/#/node
就能看到效果了
完整代码 src\components\Node.vue
<template>
<div class="curl">
<h1>{{ msg }}</h1>
<h2>{{ author }}</h2>
<ul v-for="music in musics">
<li>
{{ music.name }}
</li><br>
<li>
<img :src="music.album.picUrl" style="width:200px;">
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'curl',
data () {
return {
msg: 'vue调用接口',
author: '学习啦',
musics: []
}
},
mounted: function () {
this.$http.get('/api/playlist/detail?id=19723756', {}, {
headers: {
},
emulateJSON: true
}).then(function (res) {
this.musics = res.data.result.tracks
console.log(this.musics)
}, function (error) {
console.log(error)
})
}
}
</script>
很早前在网上搜到的,近期才开始看,已经忘了来源是哪了,如果作者看到,可以留言地址,我再标注出处
vue中axios调用接口和用node.js跨域的更多相关文章
- vue使用axios调用接口
vue本身不支持ajax接口的请求,所以在vue中经常使用axios这个接口请求工具,这个axios也是vue官方推荐的库.axios的官方github: https://github.com/mza ...
- node.js跨域
先上解决方法:在函数中添加(不要用xhr请求) // 只需要关心第二个参数res.setHeader('Access-Control-Allow-Origin', 'http://localhost: ...
- java 访问 太平洋网ip接口,解决前端js 跨域访问失败问题
前端 js访问太平洋网IP接口地址,返回结果是403 服务器拒绝处理异常, 于是,想到了使用 服务器端访问,然后再将查询结果返回的前端 这是Java的测试源码,[具体的contronller端源码懒得 ...
- vue中Axios的封装和API接口的管理
前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题 ...
- Vue中axios的封装和api接口的统一管理
更新的是我csdn上的文章,需要的话可以看下,互相学习点击去我的csdn vue中axios的封装 在vue项目和后端交互获取数据时,通常使用axios库,官方文档:https://www.npmjs ...
- vue中Axios请求豆瓣API数据并展示到Swipe中
vue中Axios请求豆瓣API数据并展示到Swipe中 1.首先是安装Axios: 安装方法cnpm install axios --save 等待npm安装完毕: 2.在main.js中引入axi ...
- 聊聊 Vue 中 axios 的封装
聊聊 Vue 中 axios 的封装 axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是: Axios 是一个基于 promise 的 HTTP 库,可以用在 ...
- axios调用接口
axios调用接口 1. 按照axiosnpm install --save-dev axios2.在main.js 引入axios, 设置全局属性$http 指向axios main.js impo ...
- vue中axios的深入使用
如上所示一条简单的请求数据,用到了vue中axios,promise,qs等等 这里我将vue中用到的axios进行了封装方便日后使用 先对工具类进行封装utils/axios.js: // 引入模 ...
随机推荐
- Node.js:EventEmitter类
一.EventEmitter 类 Node.js 所有的异步 I/O 操作在完成时都会发送一个事件到事件队列. Node.js里面的许多对象都会分发事件:一个net.Server对象会在每次有新连接时 ...
- myBatis批量添加,修改和删除
摘自: http://blog.csdn.net/myjlvzlp/article/details/8434376 1.批量添加元素session.insert(String string,Objec ...
- auto_ptr
1. int *pi = new int(1024); delete pi; // 释放pi指向的int对象占用的内存空间 pi = 0; // 将pi设置为0,不指向任何东西,为Null 注意:删除 ...
- Vijos P1002 过河 (NOIP提高组2005)
链接:https://www.vijos.org/p/1002 解析: 若 p*x+(p+1)*y=Q(採用跳跃距离p和p+1时能够跳至不论什么位置Q),则在Q ≥ P*(P-1)时是一定有解的. 因 ...
- 算法笔记_033:十六进制转八进制(Java)
目录 1 问题描述 2 解决方案 2.1 注意问题 2.2 具体实现代码 1 问题描述 具体问题描述 给定n个十六进制正整数,输出它们对应的八进制数. 输入格式 输入的第一行为一个正整数n (1& ...
- Tetris
he Tetris game is one of the most popular computer games ever created. The original game was designe ...
- 编程算法 - 从1到n整数中1出现的次数 代码(C)
从1到n整数中1出现的次数 代码(C) 本文地址: http://blog.csdn.net/caroline_wendy 题目: 输入一个整数n, 求从1到n这n个整数的十进制表示中1出现的次数. ...
- 如何下载HLS视频到本地(m3u8)
如何下载HLS视频到本地(m3u8)? CreateTime--2018年3月21日16:07:00 Author:Marydon 一.需求 很多连载的动漫需要VIP会员才能观看,而且有的由于版权 ...
- mysql.ini 配置
#记录所有sql语句 log=E:/mysqllog/mysql.log #记录数据库启动关闭信息,以及运行过程中产生的错误信息 log-error=E:/mysqllog/myerror.log # ...
- 【Redis】redis+php处理高并发,很好的教程||附上 php的文件锁
链接至:http://blog.csdn.net/nuli888/article/details/51865401 很好的教程,其中redis+php有点小问题. 附上php文件锁: $fp = fo ...