vue 新版本 webpack 代理 跨域设置 -凯发k8官方网

旧版本中：dev-server.js 这段去掉

var apiroutes = express.router() //getlist apiroutes.get('/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)}) }) //lyric apiroutes.get('/lyric', 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) => {var ret = response.dataif (typeof ret === 'string') {var reg = /^\w \(({[^()] })\)$/var matches = ret.match(reg)if (matches) {ret = json.parse(matches[1])}}res.json(ret)}).catch((e) => {console.log(e)}) }) //use app.use('/api', apiroutes)

 

在 新的 webpack.dev.config.js 中 添加

//-------------------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 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)})})},//----------------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-pluginnew htmlwebpackplugin({filename: 'index.html',template: 'index.html',inject: true}),// copy custom static assetsnew copywebpackplugin([{from: path.resolve(__dirname, '../static'),to: config.dev.assetssubdirectory,ignore: ['.*']}])] })

 

更多专业前端知识，请上 【猿2048】www.mk2048.com

总结

以上是凯发k8官方网为你收集整理的vue 新版本 webpack 代理 跨域设置的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。