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的asp.net树实现代码
Nov 30 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
Aug 27 Javascript
js data日期初始化的5种方法
Dec 29 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
Apr 20 Javascript
基于JavaScript创建动态Dom
Dec 08 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
Jun 12 Javascript
jquery validation验证表单插件
Jan 07 Javascript
vue2.0获取自定义属性的值
Mar 28 Javascript
浅谈关于vue中scss公用的解决方案
Dec 02 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
Apr 13 Javascript
Postman环境变量全局变量使用方法详解
Aug 13 Javascript
javascript实现前端分页功能
Nov 26 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
PHP中设置时区,记录日志文件的实现代码
2013/01/07 PHP
PHP和.net中des加解密的实现方法
2013/02/27 PHP
PHP exif扩展方法开启详解
2014/07/28 PHP
在Nginx上部署ThinkPHP项目教程
2015/02/02 PHP
PHP简单读取PDF页数的实现方法
2016/07/21 PHP
php实现微信分享朋友链接功能
2019/02/18 PHP
尽可能写"友好"的"Javascript"代码
2007/01/09 Javascript
JSON 学习之完全手册 图文
2007/05/29 Javascript
jquery Firefox3.5中操作select的问题
2009/07/10 Javascript
jquery 模式对话框终极版实现代码
2009/09/28 Javascript
Cookie 小记
2010/04/01 Javascript
JS远程获取网页源代码实例
2013/09/05 Javascript
常见JS验证脚本汇总
2015/12/01 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
2017/01/04 Javascript
js自定义弹框插件的封装
2020/08/24 Javascript
JS实现移动端判断上拉和下滑功能
2017/08/07 Javascript
Vue异步加载about组件
2017/10/31 Javascript
jQuery图片加载失败替换默认图片方法汇总
2017/11/29 jQuery
node.js利用socket.io实现多人在线匹配联机五子棋
2018/05/31 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
2019/09/18 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
2020/04/09 Javascript
Python基于DES算法加密解密实例
2015/06/03 Python
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
python批量修改文件编码格式的方法
2018/05/31 Python
python实现图片中文字分割效果
2019/07/22 Python
如何用Python来理一理红楼梦里的那些关系
2019/08/14 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
如何使用pycharm连接Databricks的步骤详解
2020/09/23 Python
使用CSS3来绘制一个月食图案
2015/07/18 HTML / CSS
中国综合网上购物商城:苏宁易购
2016/08/09 全球购物
Java里面如何创建一个内部类的实例
2015/01/19 面试题
士力架广告词
2014/03/20 职场文书
内科护士节演讲稿
2014/09/11 职场文书
2014单位领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
MongoDB日志切割的三种方式总结
2021/09/15 MongoDB
python_tkinter弹出对话框创建
2022/03/20 Python