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);
      })
    }
  }  
}