在项目开发的时候,接口联调的时候一般都是同域名下,且不存在跨域的情况下进行接口联调,但是当我们现在使用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. tfs 禁止多人签出

    好久没用tfs了,忘了怎么设置了,记录下 编辑----->高级

  2. redis介绍 (8) window 下redis的集群(cluster命令)

    前言: 前段时间我在centos上搭建过一次redis集群,那是借助ruby搭建,这次我介绍一种纯redis集群命令的方式去搭建[最后我会简单介绍ruby搭建]. redis集群搭建(三主三备): 准 ...

  3. 手动将经典 VM 从 VHD 迁移到新的 ARM 托管磁盘 VM

    本部分有助于将现有 Azure VM 从经典部署模型迁移到资源管理器部署模型中的托管磁盘. 计划迁移到托管磁盘 本部分可帮助你针对 VM 和磁盘类型做出最佳决策. 位置 选取 Azure 托管磁盘可用 ...

  4. scp 实现远程异地备份

    1.先做好脚本 2.再使用crontab 定时执行计划任务 0 1 * * * /usr/bin/expect /root/script/scpautodown.sh  #执行,也可先定义环境变量 0 ...

  5. January 27th, 2018 Week 04th Saturday

    How long is forever? Sometimes, just one second. 永远有多久?有时候只是一秒. Just one second can make your life t ...

  6. MarkDown 排版测试

    大标题 小标题(正常) 小标题(多一杠) 一级标题 二级标题 三级标题 四级标题(未空格) 四级标题(正常) 个人编程,写一个命令行程序 注册Github账号,建立项目仓库 添加ReadMe.md并编 ...

  7. JavaScipt中的Math.ceil() 、Math.floor() 、Math.round()、Math.pow() 三个函数的理解

    以前一直会三个函数的使用产生混淆,现在通过对三个函数的原型定义的理解,其实很容易记住三个函数. 现在做一个总结: 1. Math.ceil()用作向上取整. 2. Math.floor()用作向下取整 ...

  8. UOJ 【UR #5】怎样跑得更快

    [UOJ#62]怎样跑得更快 题面 这个题让人有高斯消元的冲动,但肯定是不行的. 这个题算是莫比乌斯反演的一个非常巧妙的应用(不看题解不会做). 套路1: 因为\(b(i)\)能表达成一系列\(x(i ...

  9. Android 怎样开启与关闭adb 的认证机制(google adb secure) (adb RSA 指纹认证)

    前言         欢迎大家我分享和推荐好用的代码段~~声明         欢迎转载,但请保留文章原始出处:          CSDN:http://www.csdn.net           ...

  10. dns与wins的区别

    将主机名字解析称为ip地址有四种办法: dns.winds.hosts文件.lmhosts文件 dns和hosts是很多系统cout采用的一个名称解析的方法,wins和lmhosts是微软的操作系统此 ...