Vuejs2.0之axios请求方式,跨域请求的处理

Vuejs由1.0更新到了2.0版本。HTTP请求官方也从推荐使用Vue-Resoure变为了axios

关于跨域

跨域的概念这些就不说了,百度一大堆相关的资料信息。我就只在这里记录下我在使用当中遇到的问题,以纪念在逝去的几个小时中资料查找的艰辛。


这样写,在请求的时候就会遇到:

很坑爹有没有?明明是已经设置好了的啊,为毛是这样???

查找了很多资料才发现,axios在发送数据时需要字符串的方式进行发送,也就是说是放在form-data当中的。

解决方案:

可以全局配置一个 base,这样就不用挨个儿修改 url 了


接着在config>index.js的dev中添加配置项proxyTable:

其中 '/api' 为匹配项,target 为被请求的地址

因为在 ajax 的 url 中加了前缀 '/api',而原本的接口是没有这个前缀的

所以需要通过 pathRewrite 来重写地址,将前缀 '/api' 转为 '/'

如果本身的接口地址就有 '/api' 这种通用前缀,就可以把 pathRewrite 删掉

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,288评论 19 139
  • 作为一名前端开发工程师,我们在开发中经常会遇到跨域这个问题。今天想从跨域的原理说起,接着到解决方案,最后到框架对跨...
    编程知识圈阅读 5,857评论 1 12
  • 从一座城 再到另一座城 我本以为 四海可以为家 父亲却告诉我: 等你老了 你就懂了 从秋热的南国 回到沁凉的故乡 ...
    老赵_e6e8阅读 191评论 0 0
  • 我从未想到,三个月前妈妈已经到了想一死了之的地步。她把遗书写好后,在五楼阳台上徘徊了很久很久。 妈妈查出抑郁症大概...
    佛祖保佑我主阅读 2,075评论 14 8