在项目开发的时候,接口联调的时候一般都是同域名下,且不存在跨域的情况下进行接口联调,但是当我们现在使用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的更多相关文章

  1. vue proxyTable 接口跨域请求调试

    在不同域之间访问是比较常见,在本地调试访问远程服务器....这就是有域问题. VUE解决通过proxyTable: 在 config/index.js 配置文件中 dev: { env: requir ...

  2. vue proxyTable 接口跨域请求调试(五)

    在不同域之间访问是比较常见,在本地调试访问远程服务器....这就是有域问题. VUE解决通过proxyTable: 在 config/index.js 配置文件中 dev: { env: requir ...

  3. vue实现跨域请求的设置

    vue实现跨域请求,需要在vue.config.js里添加以下设置 proxy: { '/service/rest': { target: 'http://localhost:8080/autotab ...

  4. Vue ajax跨域请求

    Vue webpack-dev-server实现跨域请求 思路 配置webpack-dev-server,代理某一个路径到目标路径,同是更改源和重写 Vue里定义一个全部变量:site Vue.pro ...

  5. 本地Vue项目跨域请求本地Node.js服务器的配置方法

    前言:跨域请求是在本地开发时经常遇到的需求,也很简单,只是几句代码配置一下的问题.我初次配置跨域请求时由于官方的说明太简洁,找到的教程又落伍,调试了一番并没有解决问题,到最后解决问题,已花费了很多时间 ...

  6. vue-cli 前端开发,后台接口跨域代理调试问题

    使用 webpack的方式开发的时候,前台开发过程中需要调用很多后台的数据接口,但是通常前后台分离的开发方式,后台的接口数据很可能是不方便或者是不能在前端同学的电脑上运行的,也就出现了所谓的跨域问题. ...

  7. vue axios跨域请求,apache服务器设置

    问题所在axios请求会发送两次请求 也就是说,它会先使用options去测试,你这个接口是否能够正常通讯,如果不能就不会发送真正的请求过来,如果测试通讯正常,则开始正常请求. 思路: 跨域--> ...

  8. vue axios跨域请求,代理设置

    在config下的index.js中的dev下的 proxyTable{}中设置代理 proxyTable: { '/api': { target: 'http://10.0.100.7:8081', ...

  9. 让新版Chrome支持本地跨域请求调试

    1.创建一个Chrome的启动快捷方式: 2.右键点击快捷方式属性,然后在目标路径后面,添加以下参数: --disable-web-security --user-data-dir="e:\ ...

随机推荐

  1. Salesforce自定义权限简介

    自定义权限(Custom Permission) Salesforce默认提供了多种方式设定用户的权限,比如简档.权限集等.在这些设定中,已经包括了系统中的对象.应用.字段.页面布局等组件,管理员或开 ...

  2. 【redis专题(1)】安装与启动

    简介 REmote DIctionary Server(Redis) 是一个由Salvatore Sanfilippo(redis之父)写的key-value存储系统. Redis提供了一些丰富的数据 ...

  3. django静态文件

    django静态文件(js脚本.CSS.图片等) 默认统一放在每一个app的static文件夹下, 通过收集静态文件命令,自动将每一个app下static文件夹下的文件复制到根目录的static文件夹 ...

  4. 简单易懂的程序语言入门小册子(3):基于文本替换的解释器,let表达式,布尔类型,if表达式

    let表达式 let表达式用来声明一个变量. 比如我们正在写一个模拟掷骰子游戏的程序. 一个骰子有6个面. 所以这个程序多次用到了6这个数字. 有一天,我们忽然改变主意,要玩12个面的骰子. 于是我们 ...

  5. 一文读懂遗传算法工作原理(附Python实现)

    选自AnalyticsVidhya 参与:晏奇.黄小天 近日,Analyticsvidhya 上发表了一篇题为<Introduction to Genetic Algorithm & t ...

  6. windows server服务器上mysql远程连接失败的坑

    windows server服务器上mysql远程连接失败的坑 背景:趁这阿里云活动,和朋友合伙买了个服务器,最坑的是没想到他买的是windows Server的,反正便宜,将就着用吧,自己装好了wa ...

  7. 【待补充】[HDFS_3] HDFS 工作机制

    0. 说明 HDFS 初始化文件系统分析 && HDFS 文件写入流程 && HDFS 文件读取流程分析 有价值的相关文章: [漫画解读]HDFS存储原理 1. HDF ...

  8. 11LaTeX学习系列之---LaTeX的特殊字符

    目录 目录 前言 (一)源代码 (二)输出效果 目录 本系列是有关LaTeX的学习系列,共计19篇,本章节是第11篇. 前一篇:10LaTeX学习系列之---Latex的文档结构 后一篇:12LaTe ...

  9. Java设计模式之三 ----- 建造者模式和原型模式

    前言 在上一篇中我们学习了工厂模式,介绍了简单工厂模式.工厂方法和抽象工厂模式.本篇则介绍设计模式中属于创建型模式的建造者模式和原型模式. 建造者模式 简介 建造者模式是属于创建型模式.建造者模式使用 ...

  10. Xmind破解

    原始教程 http://df1551e3.wiz03.com/share/s/3v5l7z2wdQVs2llAUc0C_-n_2cPZVe0kEA2n2iw1Ay1ApF_o