express+axios抓取其他网站上的jsonp数据 作为json输出

1.首先在依赖库中添加依赖express、axios"express": "^4.16.3",
"axios": "^0.18.0"

cnpm install

2.在webpack.dev.conf.js文件中将依赖引入，然后建立一个代理去拿到其他网站的数据
在其中添加以下代码：// start 使用代理来获取其他网站的数据
var express = require('express')
var axios = require('axios')
var app = express()
var apiRouter = express.Router()
app.use('/api', apiRouter)在devServer中添加以下代码：

before(app) {
// 获取推荐歌单数据
app.get('/api/getVedio', function(req, res) {  // 传入的两个参数第一个是接口，第二个是调用这个接口的方法
var url = 'http://www.yinyuetai.com/mv/get-first-video'  //网站的jsonp地址
axios.get(url, {  // 使用axios来获取数据，传入URL
header: {  //即将被发送的自定义请求头
referer: 'http://m.yinyuetai.com/', //这两项在网站的NetWork中的Request Header中获得
host: 'www.yinyuetai.com',
'Access-Control-Allow-Origin': '*'
},
params: req.query  // 即将与请求被发送的URL参数
}).then((response) => {
res.json(response.data)  // 作为一个json返回
}).catch((e) => {
console.log(e)  // 如果没有拿到数据，输出错误信息
})
})
app.get('/api/getSinger', function(req, res) {
var url = 'http://www.1ting.com/api/client/group_view/1.json'
axios.get(url, {
header: {
referer: 'http://h5.1ting.com/singer',
host: 'www.1ting.com',
'Access-Control-Allow-Origin': '*'
},
params: req.query
}).then((response) => {
res.json(response.data)
}).catch((e) => {
console.log(e)
})
})
}

3.建立一个在前台读取数据的文件singer.js

import axios from 'axios';

export function getSinger() {
const url = '/api/getSinger';  // 与前面的axios获取的数据URL相对应

const data = Object.assign({}, {  //这里面的数据是与请求一起发送的URL参数
page: 1,
_:1521895305719
});

return axios.get(url, {
params: data  // URL参数是data
}).then((res) => {
return Promise.resolve(res.data);  // 将获得的数据以一个Promise返回
}).catch((e) => {
console.log(e);  // 打印错误信息
});
}

4.在要使用数据的组件中加入以下代码

import { getSinger } from '../../api/singer';  // 引入获取数据的文件

export default {
created () {
this._getSinger();  // 方法在vue组件渲染完成之后进行
},
methods: {
_getSinger () {
getSinger().then((res) => {
console.log(res);
})
}
}
}