webpack+vue-cli中代理配置(proxyTable)
在做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:

webpack+vue-cli中代理配置(proxyTable)的更多相关文章
- 说下vue工程中代理配置proxy
这个代理配置不需要后台进行ngnix代理跳转了,前端可以做.在vue.config.js文件中进行配置,如下: module.exports = { publicPath: process.env.V ...
- vue cli 中关于vue.config.js中chainWebpack的配置
Vue CLI 的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象. Vue CLI 内部的 webpack 配置 ...
- Vue Cli 中使用 Karma / Chrome 执行样式相关单元测试
在 GearCase 开源项目 中,我使用了 Vue Cli 的默认测试框架.因此和样式相关的东西,都无法进行测试.因为它并不类似于无头浏览器,而是存在于虚拟内存之中. 现状 在如下 button.s ...
- vue cli中的env详解
前言 相信使用过 vueCli 开发项目的小伙伴有点郁闷,正常开发时会有三个接口环境(开发,测试,正式),但是 vueCli 只提供了两种 development,production(不包含 tes ...
- vue cli 3 lintOnSave 配置有时无效问题
一个使用vue cli 3.2创建的项目,创建时未开启 lintOnSave,后来希望开启并设置为 lintOnSave: 'error',但配置不生效. 解决方法1:新创建项目(此时vue cli ...
- Vue 项目中 ESlint 配置
前言 对于 ESlint 这一块一直存在一些疑问,今天看到一个文章内容挺好的,这里拿来了. 一.eslint 安装 1.全局安装 npm i -g eslint 全局安装的好处是,在任何项目我们都可以 ...
- vue.cli 中使用 less 来写css样式
vue-cli 的webpack中已配置了less,但 package.json 中没有选项,为了方便开发中使用,需安装一下: 安装方式一: npm install less less-loader ...
- vue cli 3.x 配置使用 sourceMap
项目使用vue cli 3.x搭建,没有了配置文件,如何更方便的查找到对应的scss文件,配置项目支持sourceMap方式? 分二步走: 1.项目根目录(不是src目录,不要搞错了)添加vue.co ...
- 手把手教你如何安装使用webpack vue cli
1.安装node.js:https://nodejs.org/en/download/(看电脑的系统是多少位下载相应版本) 我下载的是Windows Installer(.msi) x64 2.打开c ...
随机推荐
- Kafka+Zookeeper+Filebeat+ELK 搭建日志收集系统
ELK ELK目前主流的一种日志系统,过多的就不多介绍了 Filebeat收集日志,将收集的日志输出到kafka,避免网络问题丢失信息 kafka接收到日志消息后直接消费到Logstash Logst ...
- JS中的继承链
我们首先定义一个构造函数Person,然后定义一个对象p,JS代码如下: function Person(name) { this.name = name; } var p = new Person( ...
- json字符串转java对象
今天遇到一个问题,前端ajax获取到一个javaBean对象,好多方法发ajax请求需要把这个对象再传到后端,后端再根据这个对象进行操作(之前计划传递id,但发现传递id的话,后端多个方法都需要根据i ...
- bzoj千题计划255:bzoj3572: [Hnoi2014]世界树
http://www.lydsy.com/JudgeOnline/problem.php?id=3572 明显需要构造虚树 点属于谁管理分三种情况: 1.属于虚树的点 2.在虚树上的边上的点 3.既不 ...
- bzoj千题计划236:bzoj2300: [HAOI2011]防线修建
http://www.lydsy.com/JudgeOnline/problem.php?id=2300 维护动态凸包,人懒用的set 用叉积判断,不要用斜率 #include<set> ...
- meeting,symposium,seminar 等区别
meeting,symposium,seminar 等区别 会议分类的方式可说是不胜枚举,这点初步由英文对会议名称的写法,就可看出端倪,像是Assembly,Caucus,Colloquium, Co ...
- 【转载】RESTful API 设计指南
作者: 阮一峰 日期: 2014年5月22日 网络应用程序,分为前端和后端两个部分.当前的发展趋势,就是前端设备层出不穷(手机.平板.桌面电脑.其他专用设备......). 因此,必须有一种统一的机制 ...
- checkbox判断不为空
checkbox不为空 html页面: @foreach($seals as $v) <input type="checkbox" name="seal_id[]& ...
- 乘法逆元(P3811)(四种方法)
适合单个的,费马小定理,exgcd,都是不错的选择,利用积性函数的方法和欧拉筛的方法适合批量求,但是论时间和空间的话,还是积性函数的方法比较好用,线性的. 题目链接:https://www.luogu ...
- 【转】2019年3月 最新win10激活密匙 win10各版本永久激活序列号 win10正式版激活码分享
现在市面上大致有两种主流激活方法,一种是通过激活码来激活,另外一种是通过激活工具来激活.但是激活工具有个弊端就是激活时间只有180天,很多网友都想要永久激活,现在已经过了win10系统免费推广期了,所 ...