专栏首页张培跃Vue-cli解决开发环境的跨域问题

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

对于前端开发人员来讲,当你在开发环境中与后台开发人员进行数据联调时,总会遇到烦人的跨域问题!

解决跨域的方法有很多种,比如你和后台人员经过友好协商后,你可以通过JSONP的方式或者让后台人员将代码设置为允许你进行跨域!但是往往前后台开发人员的配合默契度是不太高的。如果后台只给你接口,并明确告诉你不允许修改接口,怎么办?怎么办才能实现跨域?此时你就可以通过proxyTable来解决跨域问题! 通过proxyTable解决跨域在Vue-cli当中是很简单的。只需修改config文件夹下的index.js中的proxyTable就能实现:

//代理配置表,在这里可以配置特定的请求代理到对应的API接口
proxyTable:{
    "/api":{
        target:"http://www.zhangpeiyue.com",//访问的服务器地址
        changeOrigin:true,//true为开启代理
        //secure: true, // 如果是https接口,需要配置这个参数
        pathRewrite:{
            '^/api': '/'//路径的替换规则
           /*
            *这里的配置是正则表达式,以/api开头的路径将会被‘/'替换掉
            *假如后台文档的接口是 "http://www.zhangpeiyue.com/user/add"
            *前端调取API接口应写:axios.get('/api/user/add')
            */
        }
    }
}

以上代码的“/api"你可以认为用于代替target里面的地址,调取接口的地址直接用api来替换。 比如后台接口地址为:"http://www.zhangpeiyue.com/user/login"。 你可以直接写为:"/api/user/login"即可。 当然,你也可以根据不同的API域名所负责的模块不同来进行多项配置:

//代理配置表,在这里可以配置特定的请求代理到对应的API接口
proxyTable:{
    "/adv":{
        target:"http://adv.zhangpeiyue.com",//访问的服务器地址
        changeOrigin:true,//true为开启代理
        pathRewrite:{
            '^/adv': '/'//路径的替换规则
        }
    },
    "/user":{
        target:"http://user.zhangpeiyue.com",//访问的服务器地址
        changeOrigin:true,//true为开启代理
        pathRewrite:{
            '^/user': '/'//路径的替换规则
        }
    }
}

以上代码"/adv"与"/user"分别负责项目中的广告模块与用户模块。 例如: 接口地址:“http://adv.zhangpeiyue.com/add”, 前端调取API接口应写:axios.get('/adv/add')

注意:

配置修改完以后一定要重新npm run dev 一次

补充:

changeOrigin的属性值为一个布尔值,如果设置为true,那么本地会虚拟一个NODE服务端接收你的请求并代你发送该请求(中间件)。因为服务端语言是没有跨域问题的,所以这样最终就解决了跨域问题了。不过这只适用于开发环境,上线后可以使用反向代理nginx。

本文分享自微信公众号 - 张培跃(zhangpeiyue8)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-05-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • HBase 参考指南 3.0 翻译活动期待大家的参与 | ApacheCN

    参与方式:https://github.com/apachecn/hbase-doc-zh/blob/master/CONTRIBUTING.md

    ApacheCN_飞龙
  • 计算机视觉 OpenCV Android | 特征检测与匹配之角点检测——Harris角点检测与Shi-Tomasi角点检测

    Harris角点检测与Shi-Tomasi角点检测都是经典的角点特征提取算法, 但两者在API的使用上有出入(详见文中代码或GitHub项目);

    凌川江雪
  • Xcode自动打包和上传蒲公英平台脚本(用python实现)

    工作中,特别是所做项目进入测试阶段,肯定会经常打 Ad-hoc 包给测试人员进行测试,但是我们肯定不想每次进行打包的时候都要进行一些工程的设置修改,以及一系列的...

    freesan44
  • 计算机视觉 OpenCV Android | 基本特征检测 之 轮廓分析

    调用该API会返回一个Rect对象实例,它是OpenCV关于矩形的数据结构, 从中可以得到外界矩形(边界框)的宽高, 然后就可以计算出轮廓的横纵比了。

    凌川江雪
  • 程序员的等级以及成长实践

    这篇依然是《程序员的思维修炼》的笔记, 前面 已经说过这是一本值得精读的书,需要一点一点的消化,吸收。就像书里讲的一样。

    the5fire
  • 计算机视觉 OpenCV Android | 基本特征检测 之 模板匹配

    则运行接下来的demo代码,检测结果将如下:(截图中蓝色箭头所指的红色方框即为程序所匹配并绘制的)

    凌川江雪
  • Hooks概览(译)

    Hooks是React v16.7.0-alpha中加入的新特性。它可以让你在class以外使用state和其他React特性。你可以在这里看到关于它的一些讨论...

    shirley
  • Django+JWT实现Token认证

    基于Token的鉴权机制越来越多的用在了项目中,尤其是对于纯后端只对外提供API没有web页面的项目,例如我们通常所讲的前后端分离架构中的纯后端服务,只提供AP...

    小尘哥
  • 解决SSH登录太慢的问题

    换了腾讯云国内的主机后,最近发现每次 SSH 上去都很艰难,一开始使用 fabric 自动部署博客上去还行,到后来直接超时。于是简单搜索了下,发现问题所在。

    the5fire
  • ERP的专属名词,了解一下

    企业资源计划CRM (customer relational management)

    明象ERP

扫码关注云+社区

领取腾讯云代金券