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 ...
随机推荐
- swiper4基础
这段时间在公司实习做前端,感觉前端没学习到很多前端框架,接口那些都是写好的,只需要调用就好,感觉没什么好记的,唯一觉得有必要记的就是swiper轮播了,在前端做网站的时候经常用到swiper做公告,图 ...
- 简单的C#日志记录和弹出提示
记录这个博客的想法只有两点, 一,在使用webserver的时候如果你不好调用本地server端,那么你可以启用日志来查看异常.当然也可以调用本地的server端.这里简单说一下.不是本文的重点. 发 ...
- 二.HTML
1.HTML 1. <head></head>标签 <!DOCTYPE html> <!--统一规范--> <!----> <html ...
- 70.JS---利用原生js做手机端网页自适应解决方案rem布局
利用原生js做手机端网页自适应解决方案rem布局 刚开始我用的是下面这段代码,然后js通过外部链接引入,最后每次用手机刷新网页的时候都会出现缩略图 function getRem(pwidth, pr ...
- JavaScript 之 location 对象
一.location 对象 location 对象是 window 对象下的一个属性,使用的时候可以省略 window 对象. 常用属性: location.href = 'http://www.ba ...
- linux ssh scp免密码
1.首先登入一台linux服务器做为母机(即登入其他linux系统用这台做为入口):执行一行命令生成key文件:ssh-keygen -t rsa 2.在母机上,进入/root/.ssh目录,找到id ...
- Android源码分析(四)-----Android源码编译及刷机步骤
一 : 获取源码: 每个公司服务器地址不同,以如下源码地址为例: http://10.1.14.6/android/Qualcomm/msm89xx/branches/msm89xx svn环境执行: ...
- Filter和Listener
Filter: 1.概念: web中的过滤器:当访问服务器的资源时,过滤器可以将请求拦截下来,做一些事. 过滤器的作用:一般用于完成一些通用的操作:登录验证.统一编码处理,敏感字符处理.... 2.快 ...
- .Net core 在类库中获取配置文件Appsettings中的值
大多数情况,我们开发的程序中都含有很多个类库和文件夹,有时候,我们会遇到程序中的类库需要获取配置文件的信息的情况. 像dapper 中需要使用连接字符串的时候,那么我们一直从主程序中传值这是个不好的方 ...
- centos7修改网卡命名规则
实验目的: 修改默认的网卡命名规则,习惯于ethx的形式 实验环境: centos7 熟悉控制网卡名字的规则生产的参数biosdevname/net.ifnames /etc/default/gr ...