在项目开发的时候,接口联调的时候一般都是同域名下,且不存在跨域的情况下进行接口联调,但是当我们现在使用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. 基于angular2x+ng-bootstrap构建后台管理系统界面

    写在前面的话 近来公司要做一个后台管理系统,人手比较少,于是作为一个前端也参与进来,其实据我所知,大部分的公司还是后台自己捣鼓的. 在后台没有到位的情况下,前端应该使用什么技术也着实让我为难了一把.经 ...

  2. loadrunner 运行场景-Controller及Load Generators宿主主机优化

    运行场景-Controller及Load Generators宿主主机优化 by:授客 QQ:1033553122 1.  Load Generator宿主主机优化设置 win7以下:进入“控制面板” ...

  3. loadrunner 场景设计-手工场景设计

    场景设计-手工场景设计 by:授客 QQ:1033553122 概述 通过选择需要运行的脚本,分配运行脚本的负载生成器,在脚本中分配Vuser来建立手工场景 手工场景就是自行设置虚拟用户的变化,主要是 ...

  4. NoHttp封装--02 自定义请求

    bean实体类请求: 1.bean import java.io.Serializable; import com.alibaba.fastjson.annotation.JSONField; pub ...

  5. Log4J Appender - 将Log4J的日志内容发送到agent的source

    项目中使用log4j打印的内容同时传输到flume 1.flume端 flume的agent配置内容如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 a1.sour ...

  6. 四元数与欧拉角(RPY角)的相互转换

    RPY角与Z-Y-X欧拉角 描述坐标系{B}相对于参考坐标系{A}的姿态有两种方式.第一种是绕固定(参考)坐标轴旋转:假设开始两个坐标系重合,先将{B}绕{A}的X轴旋转$\gamma$,然后绕{A} ...

  7. 常见问题--post发送参数使用httpservletrequest读取为空

    1)springcloud项目中使用request.getparameter读取参数为空 原因:使用restcontroller导致,之前为controller.而通过requestbody注解封装为 ...

  8. 描述性统计的matlab实现

    理论讲的再多不会做也白弄 直接上手 一.针对接近正态分布的(均值,方差,标准差,极差,变异系数,偏度,峰度) 这里我必须提前说明一点就是,你在写好函数后,函数的名是dts,你保存的文件名也必须是dts ...

  9. Django电商项目---完成商品主页显示day2

    利用DjangoAdmin初始化数据库 创建项目 python manage.py startapp df_goods 添加配置 manas/urls.py manas/settings.py 新创建 ...

  10. Xcode调试LLDB

    一.简介 关于Xcode调试,相信大家很多会用断点调试,今天无意间在苹果开发的群里看到了po,瞬间心中有个疑问:po是什么?下面我就百度搜索了一下,介绍一点皮毛. 首先是LLDB,它的全名是lower ...