由于没有跨域的接口,所以,用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. mysql 采样查询 / 间隔查询 / 跳跃查询的两种实现思路

    先创建一张测试表 CREATE TABLE `test` ( `id` ) DEFAULT NULL, `) DEFAULT NULL ) ENGINE=InnoDB DEFAULT CHARSET= ...

  2. C语言顺序栈

    10进制转任何进制 #include<stdio.h> #include<stdlib.h>#define maxSize 30typedef int DataType;typ ...

  3. 通过.ibd和.frm恢复mysql数据

    背景:因为机器损坏,数据库的索引文件什么的都损坏了.只留下了一个mysql的data目录… 此方法恢复数据的前提:建表用的innodb索引   备注:如果mysql的目录还都在,可以先尝试,将mysq ...

  4. 使用netty HashedWheelTimer构建简单延迟队列

    背景 最近项目中有个业务,需要对用户新增任务到期后进行业务处理.使用定时任务定时扫描过期时间,浪费资源,且不实时.只能使用延时队列处理. DelayQueue 第一想到的是java自带的延时队列del ...

  5. 关于textarea标签自己遇到的问题

    效果描述: 固定文本框的宽高,让文本框不被拖拽,让提示内容的文字垂直居中 html: <div> <label>活动详情</label> <textarea ...

  6. 【c # 数据库】存储过程

    可理解存储过程是方法,快速调用,方便使用. 数据库建立新的存储过程: CREATE PROCEDURE myProc -- Add the parameters for the stored proc ...

  7. adduser与useradd的区别

    问题:使用 useradd 创建用户,发现 /home 目录下没有自动创建关于用户的目录.所以做了一番调查研究 useradd是一个linux命令,但是它提供了很多参数在用户使用的时候根据自己的需要进 ...

  8. odoo qweb 记录

    默认的打印功能修改,比如在动作中的打印功能: 继承抽象模型 models.AbstractModel 重写 _get_report_values class PayslipDetailsReportI ...

  9. 微信小程序的开发

    https://www.cnblogs.com/jackson-zhangjiang/p/9843696.html

  10. log4j2.xml日志文件设置文件路径

    笔者最近的项目里使用了spring,spring通过web.xml配置监听器,在web启动时web.root系统变量,以供其他变量使用,例如 在属性文件里使用${web.root}以取得完整路径,项目 ...