webpack+vue-cli中代理配置(proxyTable)
2018-09-14 17:43
1251 查看
在做vue的项目时,用到webpack打包工具,我们会发现本地开发开启的node服务地址请求接口的地址存在跨域问题。本地开启的服务地址是
http://localhost:8080
而服务器的地址是
http://192.168.28.92:9096/api/
如果在你的axios请求中直接写服务器的地址进行请求,就会发生跨域的问题。如下
这就需要webpack中的proxytable代理进行配置,来解决这个跨域的问题。
在config/index.js文件中:
dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api':{ target: 'http://192.168.28.92:9096',
// secure: false,// 如果是https接口,需要配置这个参数 changeOrigin: true,//接口跨域,则需要进行这个参数配置
//pathRewrite: {
// '^api': '' //如果接口本身没有/api,则需要通过pathRewrite来重写
//} } }, }
当你的服务器接口地址是:
http://120.79.61.208:36912/shop/
此时接口地址中没有/api
则需要通过pathRewrite对接口进行重写
proxyTable: { '/api':{ target: 'http://192.168.28.92:9096', // secure: false,// 如果是https接口,需要配置这个参数 changeOrigin: true,//接口跨域,则需要进行这个参数配置 pathRewrite: { '^api': '' //如果接口本身没有/api,则需要通过pathRewrite来重写 } }
则在axios请求中的url:
相关文章推荐
- vue-cli项目开发/生产环境代理实现跨域请求+webpack配置开发/生产环境的接口地址
- 通过vue-cli来学习修改Webpack多环境配置和发布问题
- vue-cli的webpack模板项目配置文件说明
- vue-cli webpack配置分析
- vue-cli的webpack模版,相关配置文件dev-server.js与webpack.config.js配置解析
- vue-cli项目代理proxyTable如何配置exclude
- vue-cli脚手架build目录中的webpack.base.conf.js配置文件
- vue-cli#2.0 webpack 配置分析
- vue-cli webpack 配置分析
- vue-cli+webpack实现多页面应用的配置
- [置顶] vue-cli的webpack模板项目配置文件分析
- vue-cli的webpack模板项目配置文件分析
- vue-cli脚手架build目录中的webpack.dev.conf.js配置文件
- 详解vue-cli + webpack 多页面实例配置优化方法
- webpack+vue-cil 配置接口地址代理以及将项目打包到子目录的方法
- 关于vue-cli取消dev-server.js后, proxyTable代理配置问题解决
- vue-cli的webpack模板项目配置文件分析
- vue-cli项目代理proxyTable配置exclude的方法
- vue-cli+webpack打包配置
- vue-cli脚手架中webpack配置基础文件详解