vue项目中Webpack-dev-server的proxy用法
问题:在VUE项目中,需要请求后台接口获取数据,这时往往会出现跨域问题
解决方法:在vue.config.js中devServer配置proxy
常用的场景
1. 请求/api/XXX现在都会代理到请求http://www.baidu.com/api/XXX,例如/api/login代理到请求http://www.baidu.com/api/login
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'http://www.baidu.com',
changeOrigin: true,
}
}
}
};
2. 多个路径需要代理到同一个target下,你可以使用由一个或多个「具有 context 属性的对象」构成的数组:
module.exports = {
//...
devServer: {
proxy: [{
context: ['/auth', '/api'],
target: 'http://www.baidu.com',
changeOrigin: true,
}]
}
};
3. 请求路径中不用传递/api,需要重写路径,例如/api/login代理到请求http://www.baidu.com/login
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'http://www.baidu.com',
pathRewrite: {'^/api' : ''},
changeOrigin: true,
}
}
}
};
4. 需要代理到https下,默认是不接受运行在https上,且使用了无效证书的后端服务器,这时需要设置secure:false
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'https://www.baidu.com',
secure: false,
changeOrigin: true,
}
}
}
};
解决跨域原理
- changeOrigin参数, 是一个布尔值, 设置为true, 本地就会虚拟一个服务器接收你的请求并代你发送该请求
vue项目中Webpack-dev-server的proxy用法的更多相关文章
- 在webpack搭建的vue项目中如何管理好后台接口地址
在最近做的vue项目中,使用了webpack打包工具,以前在做项目中测试环境和生产环境的接口地址都是一样的,由于现在接口地址不一样,需要在项目打包的时候手动切换不同的地址,有时候忘记切换就要重新打包, ...
- vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em,rem的区别
移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...
- 配置Webpack Dev Server 实战操作方法步骤
本文摘要:配置 Webpack Dev Server 可以解决本地开发前端应用时,手动执行 webpack 命令或 yarn build 命令,再去浏览器中访问 dist/index.html 的麻烦 ...
- vue 项目中实用的小技巧
# 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...
- 如何在VUE项目中添加ESLint
如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...
- 转:如何在Vue项目中使用vw实现移动端适配
https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...
- 在Vue项目中使用vw实现移动端适配
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
- 如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
- Vue项目中使用vw实现移动端适配
我们在vue移动端项目中的适配一般都采用rem,但是rem也不是能兼容所有的终端. 随着viewport单位越来越受到众多浏览器的支持,下面将简单介绍怎么实现vw的兼容问题,用vw代替rem 当我们采 ...
随机推荐
- JSOI(联合省选)2021 划水记
流水账. Day 0 18:10 去本部拿准考证,结果发现已经没有人了./ruo 敲了几份板子,很早就去睡觉了. Day 1 7:30 到 NFLS 拿到准考证,几乎没有人来.于是做起了政治作业. 然 ...
- Apollo配置中心中的Namespace
前言:Apollo(阿波罗)是携程研发的开源配置管理中心,能够集中管理应用不同环境.不同集群的配置.同一环境统一集群的配置下有namespace概念,具体信息官方文档如下: namespace是配置项 ...
- SNP 过滤(一)
通用过滤 Vcftools(http://vcftools.sourceforge.net) 对vcf文件进行过滤 第一步:过滤最低质量低于30,次等位基因深度(minor allele count) ...
- Yii自定义全局异常,接管系统异常
Yii自定义全局异常,接管系统异常 一般自己的框架都会使用一些自己封装的全局异常,那么在系统发生异常突发情况时候,即可自主的做一些异常机制处理,例如发送短信.发送邮件通知系统维护人员或者以更加友好的方 ...
- SpringBoot 整合 MyBatis,实现 CRUD 示例
目录 前言 创建项目/模块 SpringBoot Console Application CommandLineRunner SpringBoot 集成 MyBatis 创建数据库/表 配置数据源/连 ...
- 在 windows 系统上 安装与配置 PHP + Apache
参考:http://www.cnblogs.com/pharen/archive/2012/02/06/2340628.html 在大学时候上过一门PHP课时,因为课堂需要配置过一次PHP+Mysql ...
- spring boot-jpa整合QueryDSL来简化复杂操作
spring boot-jpa整合QueryDSL来简化复杂操作 SpringDataJPA+QueryDSL玩转态动条件/投影查询
- ViewStub应用
在开发应用程序的时候,会遇到这样的情况,在运行时动态的根据条件来决定显示哪个View或哪个布局,可以把可能用到的View都写在上面,先把他们的可见性设置为View.GONE,然后在代码中动态的更改它的 ...
- mysql explain using index condition
Using where:表示优化器需要通过索引回表查询数据:Using index:表示直接访问索引就足够获取到所需要的数据,不需要通过索引回表:Using index condition:在5.6版 ...
- html href页面跳转获取参数
//传递参数 var id = columnData.id; var companyname = encodeURI(columnData.companyname); var linename = e ...