vue 音乐App QQ音乐搜索列表最新接口跨域设置方法


Posted in Javascript onSeptember 25, 2018

 在 webpack.dev.config.js中

'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')
  //-------------------axios 结合 node.js 代理后端请求 start
const express = require('express')
const axios = require('axios')
const app = express()
var apiRoutes = express.Router()
app.use('/api', apiRoutes)
  //-------------------axios 结合 node.js 代理后端请求 end

const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)

const devWebpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  },
  // cheap-module-eval-source-map is faster for development
  devtool: config.dev.devtool,

  // these devServer options should be customized in /config/index.js
  devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: {
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    },
    //----------------axios 结合 node.js 代理后端请求
    before(app) {
      // 推荐热门歌单
      app.get('/api/getDiscList', function(req, res) {
          var url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg'
          axios.get(url, {
            headers: {
              referer: 'https://c.y.qq.com/',
              host: 'c.y.qq.com'
            },
            params: req.query
          }).then((response) => {
            res.json(response.data)
          }).catch((e) => {
            console.log(e)
          })
      }),
      // 歌词
      app.get('/api/getLyric', function(req, res) {
        var url = 'https://c.y.qq.com/lyric/fcgi-bin/fcg_query_lyric_new.fcg'

        axios.get(url, {
            headers: {
              referer: 'https://c.y.qq.com/',
              host: 'c.y.qq.com'
            },
            params: req.query
          })
          .then((response) => {
            // jsonp 数据转为 json 数据
            var result = response.data
            if (typeof result === 'string') {
              var reg = /^\w+\(({[^()]+})\)$/
              var matches = result.match(reg)

              if (matches) {
                result = JSON.parse(matches[1])
              }
            }
            res.json(result)
            // res.json(response.data)
          })
          .catch((error) => {
            console.log(error)
          })
      }),
      //搜索列表接口
      // https://c.y.qq.com/soso/fcgi-bin/search_for_qq_cp
      app.get('/api/search', function(req, res) {
          var url = 'https://c.y.qq.com/soso/fcgi-bin/search_for_qq_cp'
          axios.get(url, {
            headers: {
              referer: 'https://c.y.qq.com/',
              host: 'c.y.qq.com'
            },
            params: req.query
          }).then((response) => {
            res.json(response.data)
          }).catch((e) => {
            console.log(e)
          })
      })
    },
    //----------------axios 结合 node.js 代理后端请求
    hot: true,
    contentBase: false, // since we use CopyWebpackPlugin.
    compress: true,
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    overlay: config.dev.errorOverlay ? { warnings: false, errors: true } : false,
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable,
    quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {
      poll: config.dev.poll,
    }
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
    // copy custom static assets
    new CopyWebpackPlugin([{
      from: path.resolve(__dirname, '../static'),
      to: config.dev.assetsSubDirectory,
      ignore: ['.*']
    }])
  ]
})

module.exports = new Promise((resolve, reject) => {
  portfinder.basePort = process.env.PORT || config.dev.port
  portfinder.getPort((err, port) => {
    if (err) {
      reject(err)
    } else {
      // publish the new Port, necessary for e2e tests
      process.env.PORT = port
        // add port to devServer config
      devWebpackConfig.devServer.port = port

      // Add FriendlyErrorsPlugin
      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
        compilationSuccessInfo: {
          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
        },
        onErrors: config.dev.notifyOnErrors ? utils.createNotifierCallback() : undefined
      }))

      resolve(devWebpackConfig)
    }
  })
})

在请求金封装的接口中

/*
*搜索列表
*/
export function getSearch(query,page,zhida,perpage) {
 const url = '/api/search' //在webpack.dev.config启用了代理跨域
 // const url ='https://c.y.qq.com/soso/fcgi-bin/search_for_qq_cp'
 console.log(url)
 const data = Object.assign({}, commonParams, {
  // g_tk:5381,
  // uin:0,
  // format:json,
  // inCharset:utf-8,
  // outCharset:utf-8,
  // notice:0,
  // platform:h5,
  // needNewCode:1,
  // w:query,
  // zhidaqu:1,
  // catZhida: zhida ? 1 : 0,
  // t:0,
  // flag:1,
  // ie:utf-8,
  // sem:1,
  // aggr:0,
  // perpage:20,
  // n:20,
  // p:page,
  // n: perpage,
  // remoteplace:txt.mqq.all,
  // _:1537612841753
  //-----------------------------
  // w: query,
  // p: page,
  // perpage,
  // n: perpage,
  // catZhida: zhida ? 1 : 0,
  // zhidaqu: 1,
  // t: 0,
  // flag: 1,
  // ie: 'utf-8',
  // sem: 1,
  // aggr: 0,
  // remoteplace: 'txt.mqq.all',
  // uin: 0,
  // needNewCode: 1,
  // platform: 'h5',
  // g_tk:5381,
  // _:1537612841753
  //---------------------------------测试官方数据
  g_tk:5381,
  uin:0,
  format:'json',
  inCharset:'utf-8',
  outCharset:'utf-8',
  notice:0,
  platform:'h5',
  needNewCode:1,
  w:query,
  zhidaqu:1,
  catZhida: zhida ? 1 : 0,
  t:0,
  flag:1,
  ie:'utf-8',
  sem:1,
  aggr:0,
  perpage:perpage,
  n:20,
  p:page,
  remoteplace:'txt.mqq.all',
  _:1537612841753
 })

 return axios.get(url, {
  params: data
 }).then((res) => {
  //成功后返回
  return Promise.resolve(res.data)
 })
}

总结

以上所述是小编给大家介绍的vue 音乐App QQ音乐搜索列表最新接口跨域设置方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Jquery 高亮显示文本中重要的关键字
Dec 24 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
Dec 19 Javascript
Javascript脚本实现静态网页加密实例代码
Nov 05 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
Sep 06 Javascript
JQuery ztree带筛选、异步加载实例讲解
Feb 25 Javascript
js简单实现调整网页字体大小的方法
Jul 23 Javascript
BootStrap无限级分类(无限极分类封装版)
Aug 26 Javascript
angularjs封装$http为factory的方法
May 18 Javascript
JavaScript中使用import 和require打包后实现原理分析
Mar 07 Javascript
在HTML文档中嵌入JavaScript的四种方法
May 07 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
Jul 28 Javascript
JavaScript 对象创建的3种方法
Nov 17 Javascript
Vue页面跳转动画效果的实现方法
Sep 23 #Javascript
vue解决弹出蒙层滑动穿透问题的方法
Sep 22 #Javascript
vue如何解决循环引用组件报错的问题
Sep 22 #Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
Sep 22 #Javascript
angular的输入和输出的使用方法
Sep 22 #Javascript
vue构建动态表单的方法示例
Sep 22 #Javascript
小程序实现展开/收起的效果示例
Sep 22 #Javascript
You might like
十大“创意”战术!
2020/03/04 星际争霸
提升PHP执行速度全攻略(下)
2006/10/09 PHP
PHP数组操作汇总 php数组的使用技巧
2011/07/17 PHP
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
PHP加密扩展库Mcrypt安装和实例
2013/11/10 PHP
php无限遍历目录示例
2014/02/21 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
2016/05/19 PHP
php 策略模式原理与应用深入理解
2019/09/25 PHP
JQuery开发的数独游戏代码
2010/10/29 Javascript
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
jquery获取radio值(单选组radio)
2014/10/16 Javascript
深入探讨javascript中的数据类型
2015/03/04 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
2015/09/16 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
JS实现的DIV块来回滚动效果示例
2017/02/07 Javascript
angularjs中ng-bind-html的用法总结
2017/05/23 Javascript
NodeJS实现微信公众号关注后自动回复功能
2017/05/31 NodeJs
记一次Vue.js混入mixin的使用(分权限管理页面)
2019/04/17 Javascript
egg.js的基本使用和调用数据库的方法示例
2019/05/18 Javascript
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
[03:40]DOTA2英雄梦之声_第01期_炼金术士
2014/06/23 DOTA
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
Python爬虫之UserAgent的使用实例
2019/02/21 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
python with (as)语句实例详解
2020/02/04 Python
Python3创建Django项目的几种方法(3种)
2020/06/03 Python
什么是python的函数体
2020/06/19 Python
Python修改DBF文件指定列
2020/12/19 Python
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
大码女装:Ulla Popken
2019/08/06 全球购物
大三预备党员入党思想汇报
2014/01/08 职场文书
小学标准化建设汇报材料
2014/08/16 职场文书
评职称个人总结
2015/03/05 职场文书
装饰施工员岗位职责
2015/04/11 职场文书
超级详细实用的pycharm常用快捷键
2021/05/12 Python