vue-cli配置跨域代理
现在使用vue大多使用了前后端分离模式,因此游览器经常显示跨域失败的信息,现在跨域的方式很多种,主要分两大类,ajax跨域,dom跨域,具体的方法就不例举啦。
vue-cli作为一个强大的脚手架,内置了一个简单的配置型跨域方式
找到目录下的config文件下,index.js中dev配置对象中的proxyTable属性,这里是一个对象
下面对这个对象属性进行解析:
proxyTable: {
'/api':{ //这里的key就是axios的baseURL
target: 'http://127.0.0.1', //访问域名
changeOrigin: true, //开启跨域
pathRewrite:{ // 路径重写,
'^/api': 'api/index.php' // 替换target中的请求地址
}
}
}
也就是设置axios的baseURL可以只设置为'/api',然后在proxyTable里面定义匹配这个路径的代理配置对象,设置target为访问的域名,设置重写为访问域名的后缀,即域名后的地址,然后开启changeOrigin属性即可。
注意:配置好后由于这个文件不在src下,不会触发构建,每次修改需要重新npm run dev 来使用新的配置,此时成功会看到命令行输出代理服务器配置信息
vue-cli配置跨域代理的更多相关文章
- eclipse加速/Nginx配置跨域代理
下班时间到啦! --下班都是他们的,而我,还是什么都没有. eclipse加速 去掉包含js文件的包的js验证,否则每次启动都需要进行校验(右击项目->properties) Nginx配置跨域 ...
- vue cli 解决跨域 线上 nginx 反向代理配置
前后分离 axios 接 api 跨域问题如图: 解决办法: 1. npm start 本地开发环境解决: 在webpack配置文件 /config/index.js 里找到 proxyTable 开 ...
- Nginx:多项目开发配置跨域代理
简述Nginx应用场景(前后端) 当我们开发 vue 项目中可以通过 proxyTable 进行跨域,但如果是原生的 html+css+js ,或者其他没有跨域插件的项目中,想要跨域就要引入配置许多的 ...
- axios,vue-echarts, async, vue 图表数据处理; axios 跨域代理; 异步同步请求接口;生命周期函数
1.vue-echarts 安装和组件引用 插件官网 https://github.com/ecomfe/vue-echarts 安装 npm install eacharts vue-echarts ...
- nginx配置跨域、gzip加速、代理详细讲解
1.配置跨域 这个很简单,直接打开配置nginx.conf ,在http下配置下面三行代码:当然如果你是想某一个虚拟主机下跨域,那就在哪个server下面添加 add_header Access-Co ...
- vue开发环境配置跨域,一步到位
本文要实现的是:使用vue-cli搭建的项目在开发时配置跨域,上线后不做任何任何修改,接口也可以访问,前端跨域解决方案 production:产品 生产环境 development:开发 开发环境 1 ...
- Next.js 配置接口跨域代理转发
使用 create-next-app 创建的 Next.js 项目配置接口跨域代理转发需要用到 custom server 功能. 先安装好 express 和 http-proxy-middlewa ...
- Vue用axios跨域访问数据
Vue用axios跨域访问数据axios是vue-resource的替代品,vue-resource不再维护.安装axios:npm install axios使用vue-cli开发时,由于项目本身启 ...
- React网络请求跨域代理设置
之前的之所以可以请求其他域名下的网络数据,是因为我们在服务端设置了相关配置,如下所示 如果将其注释掉,再次测试,如下所示 此时便无法跨域操作,接下来介绍下React如何实现跨域代理 (1)分析 Rea ...
随机推荐
- maven中pom的继承以及dependencies与dependencyManagement的区别
https://blog.csdn.net/zzm3280/article/details/84952623 分类专栏: maven 本文转自:https://blog.csdn.net/liut ...
- C#读写修改设置调整UVC摄像头画面-滚动
有时,我们需要在C#代码中对摄像头的滚动进行读和写,并立即生效.如何实现呢? 建立基于SharpCamera的项目 首先,请根据之前的一篇博文 点击这里 中的说明,建立基于SharpCamera的摄像 ...
- C# vb .net图像合成-合成自定义路径
在.net中,如何简单快捷地实现图像合成呢,比如合成文字,合成艺术字,多张图片叠加合成等等?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码 ...
- 自定义WPF Popup控件
解决问题 1.WPF Popup 不随着 Window 一起移动的问题 2.WPF Popup 总是显示在最前面 引用命名空间 xmlns:ctrl="clr-namespace:Micro ...
- 巧记 In/hasOwnProperty/for…in/for…of/forEach区别
写在前面 上面提到的这些东西,反复的记忆,反复的忘记.现分享一种巧记方法,有需要,请参考,希望你也过目不忘. 仅提供巧记思路.仅提供巧记思路.仅提供巧记思路. 1. in 用于判断属性是否在对象上(包 ...
- Beego 学习笔记14:Session控制
Session控制 1> Session常用来作为全局变量使用,比如记录当前登录的用户,或者页面之间传递数据使用. 2> Beego框架内置了 session 模块,目前 ...
- 给router-link 标签添加事件@click 、@mouseover等无效
需要加上native修饰符. 所以如果在想要在router-link上添加事件的话需要@click.native这样写 所以如果要事件有效的话,改成如下: <router-link v-for= ...
- SQLI-LABS LESS 1-LESS 22
SQLI-LABS LESS 1-LESS 22 0x01:前言 因为最近感觉手注快忘光了,所以玩一遍sqli-labs巩固一下. sql注入,基于从服务器接收到的响应分类为 : ▲基于错误的SQL注 ...
- mongo数据库的一些命令(对于新同学,按照我的步骤连一遍即可)
进入mongo mongo 查看数据库 show dbs;/show databases(); 第一个命令简单(admin和local数据库是系统自带的) 进入/创建数据库 use 数据库名字(如果有 ...
- 让window10目录支持大小写
今天用vmware影响文件夹以供linux系统使用,结果宿主机是win10系统,所以用在linux里,大小写变得不敏感. 解决办法也很简单. 管理员模式运行cmd(默认目录是C:\Windows\Sy ...