由于没有跨域的接口,所以,用8080端口请求8081端口,来模拟跨域。跨域会出现下面报错。

1.找到config文件夹下index.js,在proxyTable对象里复制以下代码:

    proxyTable: {
'/apis': {
// 测试环境
target: 'http://localhost:8081', // 接口域名
changeOrigin: true, //是否跨域
pathRewrite: {
'^/apis': '' //需要rewrite重写的,
}
}
},

 注意:【更改完这个配置文件后,需要重启项目】

2.使用fetch,vue-resource或axios请求接口

fetch请求:

    //用 /apis代替http://localhost:8082
fetch("/apis").then(res=>{
console.log(res);
})

axios请求:

this.$axios.get("/apis").then(res=>{
console.log(res);
})

vue-resource请求:

  this.$http.get("/apis").then(res=>{
console.log(res);
});

这样请求,就不会跨域了:

使用proxyTable解决vue里的跨域问题的更多相关文章

  1. Vue-cli proxyTable 解决开发环境的跨域问题

    Vue-cli proxyTable 解决开发环境的跨域问题 proxyTable: { '/list': { target: 'http://api.xxxxxxxx.com', pathRewri ...

  2. 如何实现vue前端跨域,proxyTable解决开发环境前端跨域问题

    在开发环境与后端调试的时候难免会遇到跨域问题,很多人说跨域交给后端解决就好了. 其实不然,前端也有很多方法可以解决跨域,方便也快捷. 常见的有nginx转发.node代理. 在vue项目中常用的是pr ...

  3. Vue proxyTable 解决开发环境的跨域问题

    在 config/index.js 配置文件中,添加 dev: { proxyTable: { '/ssp/withdraw': { target: 'http://dev.home.phiwifi. ...

  4. 转:Vue-cli proxyTable 解决开发环境的跨域问题

    转:http://www.jianshu.com/p/95b2caf7e0da 和后端联调时总是会面对恼人的跨域问题,最近基于Vue开发项目时也遇到了这个问题,两边各自想了一堆办法,查了一堆资料,加了 ...

  5. 解决vue代理和跨域问题

    一.安装vue-resource插件 安装命令:npm install vue-resource --save  安装完之后在根目录下的package.json检查一下插件的版本 在rourer-in ...

  6. Vue-cli中的proxyTable解决开发环境的跨域问题

    https://blog.csdn.net/u012149969/article/details/80288126 https://vuejs-templates.github.io/webpack/ ...

  7. Vue用axios跨域访问数据

    Vue用axios跨域访问数据axios是vue-resource的替代品,vue-resource不再维护.安装axios:npm install axios使用vue-cli开发时,由于项目本身启 ...

  8. vue开发之跨域请求,请求头not allowed by Access-Control-Allow-Headers,后端cookie session值取不到(二)

    原因:你本地的请求ajax的get和post请求:如果你的请求头内放一些可用验证数据Token的时候就会存在跨域请求这是浏览器所不允许的问题: 方案一:后台的接口请求模式都写成jsonp请求,前端去调 ...

  9. Vue开发环境跨域访问

    Vue开发环境跨域访问其他服务器或者本机其他端口,需要配置项目中config/index.js文件,修改如下 module.exports = { dev: { // Paths assetsSubD ...

随机推荐

  1. Redis物理文件结构

    Redis物理文件结构  对于数据库,个人习惯先从物理结构文件入手,整体上看一下有哪些文件,都是什么作用.类似于MySQL,数据文件和配置文件是Redis最基本也是做主要的两个物理文件之一,相比MyS ...

  2. linux下open-vswitch安装卸载操作

    一. ovs 从源码编译安装: 安装依赖项: ? 1 2 3 4 5 6 7 8 9 10 11 # apt install make # apt install gcc # apt install ...

  3. jmiter性能测试

    1. Jmeter简介Apache JMeter是一款纯java编写负载功能测试和性能测试开源工具软件.相比Loadrunner而言,JMeter小巧轻便且免费,逐渐成为了主流的性能测试工具,是每个测 ...

  4. UTF-8和GBK有什么区别

    UTF-8和GBK有什么区别 2017年06月03日 18:10:43 阅读数:6516 GBK是在国家标准GB2312基础上扩容后兼容GB2312的标准(好像还不是国家标准).GBK编码专门用来解决 ...

  5. 含有Date属性的对象转化为Json

    含有Date类型属性的对象,转化为Json,Date属性并不是时间戳格式. 解决方法: 使用Jackson的注解@JsonFormat,添加到对象属性上方即可. 我们的北京时间会相差8个小时,因为我们 ...

  6. P3865 【模板】ST表

    P3865 [模板]ST表 https://www.luogu.org/problemnew/show/P3865 题目背景 这是一道ST表经典题——静态区间最大值 请注意最大数据时限只有0.8s,数 ...

  7. CVTE C/C++开发工程师笔试题(二)

    问题描述:打印重复元素 给定一个数组,内容可能包含1到N的整数,N最大为40000,数组可能含有重复的值,且N的取值不定.若只剩余5KB内存可用,请设计函数尽可能快的答应数组中所有重复的元素. voi ...

  8. oracle 中查看数据库表中某个字段是否重复

    1.select  表中重复的字段 from  表名 group by 表中的重复的字段 HAVING count(表中的重复的字段)>1 举例说明 : 表名 : psp_cell_model  ...

  9. 【每日更新】【Redis学习】

    5. Redis订阅和发布模式和Redis事务 -------------------Redis事务------------------- 1.概念:     redis中的事务是一组命令的集合.事务 ...

  10. C# DataTable抽取Distinct数据(不重复数据)[z]

    DataTable dataTable;       DataView dataView = dataTable.DefaultView;       DataTable dataTableDisti ...