K先生个人博客

当前位置:首页 > 爱技术 > 正文

vue封装axios的post方法的跨域问题:has been blocked by CORS policy: Response to preflight request doesn't pass access control check

今天使用axios封装post请求方法的时候遇到了CORS跨域问题,奇怪的是封装的get方法可以正常使用的,所以这是一个很值得思考的问题,我后台接口已经设置了允许跨域了,封装的get方法的正常使用证实了我后台接口设置的允许跨域是有效的,那么问题就来了,为什么偏偏封装的post方法会报CORS跨域错误呢。

vue封装axios的post方法的跨域问题:has been blocked by CORS policy: Response to preflight request doesn't pass access control check

根据错误信息,猜测可能是header请求头没设置的问题,于是在创建axios实例的时候加上:

headers: {
  'Content-Type':'application/json'
}

试了一下还是报错,然后又是一阵子抓耳挠腮,最后得出了解决方法。

headers应该这样设置:

headers: {
  'Content-Type':'application/x-www-form-urlencoded'
}

Content-Type设置为表单类型就不会再报那个CORS跨域错误了,以前没想到过CORS跨域问题竟然还会和Content-Type有关,今天算是又上了一课。

还有一点要特别注意,axios的post传参数要使用Qs序列化哦,Qs是axios自带的,不需要再安装了。也就是说你的post传参数应该是下面这样的:

import Qs from 'qs'
Qs.stringify(params)

这篇文章并不是说怎么去解决跨域,而是叙述了一个可能造成CORS跨域报错的个例。

有问题的小伙伴可以留言哈,学习无止境,期待与你互动。

作者K先生本文地址http://www.gold404.cn/info/91

版权声明:本文为原创文章,版权归 K先生个人博客 所有,欢迎分享本文,转载请保留出处,谢谢!

文章评论

* 必填
可选
可选

评论列表