Vue-接口跨域请求调试proxyTable
在项目开发的时候,接口联调的时候一般都是同域名下,且不存在跨域的情况下进行接口联调,但是当我们现在使用vue-cli进行项目打包的时候,我们在本地启动服务器后,比如本地开发服务下是 http://localhost:8080 这样的访问页面,但是我们的接口地址是 http://localhost:3000这样的接口地址,我们这样直接使用会存在跨域的请求,导致接口请求不成功,VUE通过proxyTable来解决,因此我们需要在打包的时候配置一下,我们进入 config/index.js 进行如下配置即可:
/*代理配置表,在这里可以配置特定的请求代理到对应的API接口*/
/* 下面的例子将代理请求 /api/getNewsList 到 http://localhost:3000/getNewsList*/
proxyTable: {
'/api': {
changeOrigin: true,// 如果接口跨域,需要进行这个参数配置
target: 'http://localhost:3000',// 接口的域名
pathRewrite: {
'^/api': ''//后面可以使重写的新路径,一般不做更改
}
}
配置好后,该如何使用呢?使用vue-resouce发送Ajax获取数据
this.$http.get('/api/getNewsList')//代替http://localhost:3000/getNewsList
.then((res) => {
this.newsList = res.data
}, (err) => {
console.log(err)
})
配置好代理后如果请求不到数据,可以访问原本的服务器接口 http://localhost:3000/getNewsList,如果直接访问服务器接口可以请求到数据那么就是请求代理配置有问题,否则就是其它问题。
注意:配置好后,一定要npm run dev 重新启动项目!!!
Vue-接口跨域请求调试proxyTable的更多相关文章
- vue proxyTable 接口跨域请求调试
在不同域之间访问是比较常见,在本地调试访问远程服务器....这就是有域问题. VUE解决通过proxyTable: 在 config/index.js 配置文件中 dev: { env: requir ...
- vue proxyTable 接口跨域请求调试(五)
在不同域之间访问是比较常见,在本地调试访问远程服务器....这就是有域问题. VUE解决通过proxyTable: 在 config/index.js 配置文件中 dev: { env: requir ...
- vue实现跨域请求的设置
vue实现跨域请求,需要在vue.config.js里添加以下设置 proxy: { '/service/rest': { target: 'http://localhost:8080/autotab ...
- Vue ajax跨域请求
Vue webpack-dev-server实现跨域请求 思路 配置webpack-dev-server,代理某一个路径到目标路径,同是更改源和重写 Vue里定义一个全部变量:site Vue.pro ...
- 本地Vue项目跨域请求本地Node.js服务器的配置方法
前言:跨域请求是在本地开发时经常遇到的需求,也很简单,只是几句代码配置一下的问题.我初次配置跨域请求时由于官方的说明太简洁,找到的教程又落伍,调试了一番并没有解决问题,到最后解决问题,已花费了很多时间 ...
- vue-cli 前端开发,后台接口跨域代理调试问题
使用 webpack的方式开发的时候,前台开发过程中需要调用很多后台的数据接口,但是通常前后台分离的开发方式,后台的接口数据很可能是不方便或者是不能在前端同学的电脑上运行的,也就出现了所谓的跨域问题. ...
- vue axios跨域请求,apache服务器设置
问题所在axios请求会发送两次请求 也就是说,它会先使用options去测试,你这个接口是否能够正常通讯,如果不能就不会发送真正的请求过来,如果测试通讯正常,则开始正常请求. 思路: 跨域--> ...
- vue axios跨域请求,代理设置
在config下的index.js中的dev下的 proxyTable{}中设置代理 proxyTable: { '/api': { target: 'http://10.0.100.7:8081', ...
- 让新版Chrome支持本地跨域请求调试
1.创建一个Chrome的启动快捷方式: 2.右键点击快捷方式属性,然后在目标路径后面,添加以下参数: --disable-web-security --user-data-dir="e:\ ...
随机推荐
- Gartner2017年BI研究计划曝光,来看看他研究的都是啥?
文 | 水手哥 本文出自:知乎专栏<帆软数据应用研究院>——数据干货&资讯集中地 近日,Gartner发布了<Analytics and Business Intelli ...
- 【转】用yum只下载rpm包而不安装
转自:http://liucheng.name/1950/ CentOS用yum安装软件是非常方便的,有时,我们只需要下载其中的rpm包,而不直接安装时咋办呢? 一般情况下,yum是不提供只下载的功能 ...
- Linux 学习笔记之超详细基础linux命令 Part 6
Linux学习笔记之超详细基础linux命令 by:授客 QQ:1033553122 ---------------------------------接Part 5----------------- ...
- Expo大作战(三十一)--expo sdk api之Payments(expo中的支付),翻译这篇文章傻逼了,完全不符合国内用户,我只负责翻译大家可以略过!
简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...
- (后台)There is already 'jy.controller.jyadmin.JyDealerPackingReturnController' bean method
项目报了一个错误,百度翻译了一下: “我已经有jy.controller.jyadmin.jydealerpackingreturncontroller豆方法公共org.springframework ...
- JdbcTemplate学习笔记(更新插入删除等)
1.使用JdbcTemplate的execute()方法执行SQL语句 jdbcTemplate.execute("CREATE TABLE USER (user_id integer, n ...
- Nginx下配置网站SSL实现https访问本站就是用的这方法
本文出至:新太潮流网络博客 第一步:服务器环境,lnmp即Linux+Nginx+PHP+MySQL,本文中以我的博客为例,使用的是阿里云最低档的ECS+免费的Linux服务器管理系统WDCP快速搭建 ...
- C# 异步编程3 TPL Task 异步程序开发
.Net在Framework4.0中增加了任务并行库,对开发人员来说利用多核多线程CPU环境变得更加简单,TPL正符合我们本系列的技术需求.因TPL涉及内容较多,且本系列文章为异步程序开发,所以本文并 ...
- shell 的条件表达式及逻辑操作符简单介绍
查看系统的shell: cat /etc/shells 文件测试表达式: -f 文件 文件存在且为普通文件则真,即测试表达式成立. -d 文件 文件存在且为目录文件则真,即测试表达式成立. -s ...
- Linux 小知识翻译 - 「Linux」和病毒
据说,「Linux」系统上的病毒要远远少于Windows系统上病毒.从2种系统的普及度来看,这是很显然的, 「Linux」的使用人群很少,所以「Linux」上的病毒的扩散时,受害的范围也不大. 但是, ...