vue 新版本 webpack 代理 跨域设置
2023-09-14 09:06:33 时间
旧版本中: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.data if (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-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: ['.*'] }]) ] })
相关文章
- Java项目毕业设计:基于springboot+vue的电影视频网站系统「建议收藏」
- 如何准备vue相关的知识点
- Vue之const的使用及注意点
- VUE 网页生成 PDF[通俗易懂]
- Vue学习笔记1-什么是Vue
- Vue项目element组件遇到的坑(记录篇持续更新)
- Vue笔记(9) 脚手架
- vue使用axios解决跨域_vue前端解决跨域的方法
- vue webpack 前后端请求响应流程
- vue h5 highcharts可滑动折线面积图
- 怎样刷vue面试题
- vue项目部署后刷新404_vue重载当前页面
- vue如何生成二维码_vue实现扫描二维码
- Vue和vue全家桶有什么区别_Vue和vue全家桶有什么区别
- Ant Design Vue 上手 | 结合 Vue.js 写一个音乐下载工具
- Vue 快速入门(二)
- 今天讲vue讲解专栏里的VUE组件
- 常考vue面试题(必备)
- Vue学习笔记(二)
- 开心档之Vue.js 组件
- 京东前端二面必会vue面试题(持续更新中)_2023-02-24
- Vue入门 基本使用 与 事务管理【1】
- 4. 「vue@2.6.11 源码分析」new Vue() 整体流程和组件渲染之前的准备工作
- 基于Vue+SSM+SpringCloudAlibaba的科目课程管理系统
- js ajax 设置代理ip(vue Ajax 设置 代理ip)
- 开心档-软件开发入门之Vue.js Ajax(vue-resource)
- linux下快速部署Vue项目(linux部署vue)
- Vue如何连接Redis数据库(vue怎么连接Redis)
- 研究Oracle VUE价格探究深入探究和分析(oracle vue价格)