由于没有跨域的接口,所以,用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. react项目如何修改默认3000端口号

    在运行react项目时,经常会遇到默认的3000端口被占用的情况,此时不想查找哪个程序占用了3000端口,想使用其他端口继续运行. 打开项目中的node_modules文件夹,找到react_scri ...

  2. jQuery 效果 - 动画 animate() 方法

    我们先看一个demo <!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11. ...

  3. linux 查看文件方法

    vi 文件名 #编辑方式查看,可修改cat 文件名 #显示全部文件内容more 文件名 #分页显示文件内容tail 文件名 #仅查看尾部,还可以指定行数head 文件名 #仅查看头部,还可以指定行数s ...

  4. java发送post请求,使用multipart/form-data的方式传递参数,可实现服务器间文件上传功能(转)

    废话少说,直接上代码: /** * 测试上传图片 * */ public static void testUploadImage(){ String url = "http://xxxtes ...

  5. Selenium Extent Report的设置

    Extent Report需要在线加载css,不然生成的html report会很难看. 但可以设置不在线加载css,而是使用本地css,在使用htmlreporter加上这句 htmlReporte ...

  6. 利用Access-Control-Allow-Origin响应头解决跨域请求原理

    传统的跨域请求没有好的解决方案,无非就是jsonp和iframe,随着跨域请求的应用越来越多,W3C提供了跨域请求的标准方案(Cross-Origin Resource Sharing).IE8.Fi ...

  7. JDBC四种驱动程序

    四种JDBC驱动程序 JDBC-ODBC桥驱动程序(JDBC-ODBC Bridge Driver) 此类驱动程序由JDBC-ODBC桥和一个ODBC驱动程序组成.其工作原理是,通过一段本地C代码将J ...

  8. ARM汇编指令格式

    一.ARM介绍 1) arm汇编中,程序下一步执行哪一条指令,是根据程序计数器(PC)的值来决定. 类比于8086的CS:IP的功能. 2) 8086属于CISC(复杂指令集),每条指令长度不等,ar ...

  9. tiny4412--linux驱动学习(1)

    1,概述 linux设备驱动分为三种:字符驱动设备.块驱动设备.网络设备 架构: 1,字符设备驱动 是指只能一个字节一个字节读写的设备,不能随机读取设备内存中的某一数据,读取数据需要按照先后数据.字符 ...

  10. 7A - Max Sum

    Given a sequence a[1],a[2],a[3]......a[n], your job is to calculate the max sum of a sub-sequence. F ...