在项目开发的时候,接口联调的时候一般都是同域名下,且不存在跨域的情况下进行接口联调,但是当我们现在使用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. (后台)There is already 'jy.controller.jyadmin.JyDealerPackingReturnController' bean method

    项目报了一个错误,百度翻译了一下: “我已经有jy.controller.jyadmin.jydealerpackingreturncontroller豆方法公共org.springframework ...

  2. android recovery 升级之USB设备挂载

    Recovery升级过程,通常会从两个地方获取升级包update.zip升级,一般在线升级,会把升级包下载到cache分区,本地升级会从usb或者tf卡中升级.本文讨论下,本地USB升级时,无法挂载U ...

  3. 【redis专题(3)】命令语法介绍之link

    通过链表结构可以模仿队列结构与堆栈结构:关于队列结构和堆栈结构可以查看https://www.zybuluo.com/a5635268/note/290475 增 lpush key value1 v ...

  4. 洗礼灵魂,修炼python(47)--巩固篇—定义类的方法之@classmethod,@staticmethod

    定义类的方法,相信你会说,不就是在class语句下使用def () 就是定义类的方法了嘛,是的,这是定义的方法的一种,而且是最普通的方式 首先,我们已经知道有两种方式: 1.普通方法: 1)与类无关的 ...

  5. Linux 设备树的解释 - DTB文件格式【转】

    https://blog.csdn.net/cc289123557/article/details/51782449 1.dtb文件格式 dtb文件的格式如下图 : NOTE:不同部分顺序可能不一样 ...

  6. CentOS7:搭建配置SVN服务器

    1. 安装 CentOS通过yum安装subversion. $ sudo yum install subversion subversion安装在/bin目录: $ which svnserve / ...

  7. C# 动态方法和静态方法的区别

    C# 动态方法和静态方法的区别 (转) 动态方法与静态方法的区别: 1,使用方法上的区别:动态方法,在使用时需要先创建实例,才能调用实例方法,而静态方法则不需要,直接使用即可. 示例代码如下:静态方法 ...

  8. 路由交换01-----ICMP协议

    路由交换协议------ICMP ICMP协议 ICMP (InternetControl Message Protocol)协议是TCP/IP协议簇的核心协议之一,用来在网络设备之间传递各种差错和控 ...

  9. February 7th, 2018 Week 6th Wednesday

    We are all resigned to death: it is life we aren't resigned to. 我们可以屈从于死神,但我们却不能让生活任意摆布. Of all the ...

  10. 百度地图API开发

    1.首先申请百度地图秘钥 http://lbsyun.baidu.com/ 2.需要填一个申请的界面 3.申请后会有类似的东西 4.之后参照以下网址进行MFC编译 mfc webbrowser控件使用 ...