<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跨域的更多相关文章

  1. vue使用axios调用接口

    vue本身不支持ajax接口的请求,所以在vue中经常使用axios这个接口请求工具,这个axios也是vue官方推荐的库.axios的官方github: https://github.com/mza ...

  2. node.js跨域

    先上解决方法:在函数中添加(不要用xhr请求) // 只需要关心第二个参数res.setHeader('Access-Control-Allow-Origin', 'http://localhost: ...

  3. java 访问 太平洋网ip接口,解决前端js 跨域访问失败问题

    前端 js访问太平洋网IP接口地址,返回结果是403 服务器拒绝处理异常, 于是,想到了使用 服务器端访问,然后再将查询结果返回的前端 这是Java的测试源码,[具体的contronller端源码懒得 ...

  4. vue中Axios的封装和API接口的管理

    前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题 ...

  5. Vue中axios的封装和api接口的统一管理

    更新的是我csdn上的文章,需要的话可以看下,互相学习点击去我的csdn vue中axios的封装 在vue项目和后端交互获取数据时,通常使用axios库,官方文档:https://www.npmjs ...

  6. vue中Axios请求豆瓣API数据并展示到Swipe中

    vue中Axios请求豆瓣API数据并展示到Swipe中 1.首先是安装Axios: 安装方法cnpm install axios --save 等待npm安装完毕: 2.在main.js中引入axi ...

  7. 聊聊 Vue 中 axios 的封装

    聊聊 Vue 中 axios 的封装 axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是: Axios 是一个基于 promise 的 HTTP 库,可以用在 ...

  8. axios调用接口

    axios调用接口 1. 按照axiosnpm install --save-dev axios2.在main.js 引入axios, 设置全局属性$http 指向axios main.js impo ...

  9. vue中axios的深入使用

    如上所示一条简单的请求数据,用到了vue中axios,promise,qs等等 这里我将vue中用到的axios进行了封装方便日后使用  先对工具类进行封装utils/axios.js: // 引入模 ...

随机推荐

  1. Android面试,BroadCastReceiver的两种注册方式的异同

    在Android手机应用程序中开发中,需要用到BroadcastReceiver来监听广播的消息.在自定义好BroadcastReceiver ,需要对其进行注册,注册有两种方法: 一种是在代码当中注 ...

  2. Linux 内存泄露小结

    本文仅限记录自己的一次 内存泄露追踪小记. 可能并不十分适用与大家的情况.而且方法也并不是很smart.仅做记录,能提供个思路更好.        一. 要问调试程序遇到什么问题最头疼, 内存泄露肯定 ...

  3. Spring+Shiro搭建基于Redis的分布式权限系统(有实例)

    摘要: 简单介绍使用Spring+Shiro搭建基于Redis的分布式权限系统. 这篇主要介绍Shiro如何与redis结合搭建分布式权限系统,至于如何使用和配置Shiro就不多说了.完整实例下载地址 ...

  4. Java基础语法(第1章变量)

    今日内容介绍 1.变量 2. 运算符   变量 1.1.变量概述 前面我们已经学习了常量,接下来我们要学习变量.在Java中变量的应用比常量的应用要多很多.所以变量也是尤为重要的知识点! 什么是变量? ...

  5. apple iMac一体机 装双系统 实战! (Apple +Win 7 64bit)

    http://group.zol.com.cn/1/641_485.html http://tieba.baidu.com/p/2532811864 http://www.jb51.net/os/82 ...

  6. 苹果开发——设置iTunes Connect中的Contracts, Tax, and Banking

    原地址:http://zengwu3915.blog.163.com/blog/static/2783489720137485857701?suggestedreading 如果要在苹果商城发布收费应 ...

  7. zookeeper 入门讲解实例 转

    转  http://www.blogjava.net/BucketLi/archive/2010/12/21/341268.html zookeeper使用和原理探究(一) zookeeper介绍zo ...

  8. Apache Ant和Apache Maven的区别

    Apache Ant和Apache Maven的区别 分类: ANT Maven 2013-12-10 18:47 1477人阅读 评论(26) 收藏 举报 ———摘自<maven权威指南> ...

  9. 基于Scrapy框架的Python新闻爬虫

    概述 该项目是基于Scrapy框架的Python新闻爬虫,能够爬取网易,搜狐,凤凰和澎湃网站上的新闻,将标题,内容,评论,时间等内容整理并保存到本地 详细 代码下载:http://www.demoda ...

  10. linux中echo的使用方法

    1.echo命令我们经常使用的选项有两个,一个是-n,表示输出之后不换行.另外一个是-e,表示对于转义字符按对应的方式处理,假设不加-e那么对于转义字符会按普通字符处理. 2.echo输出时的转义字符 ...