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