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

K先生 2020-07-21 爱技术45406

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

根据错误信息，猜测可能是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

上一篇：关于laravel的jwt认证教程我猜这才是新手最想看到的

下一篇： Laravel6的jwt-auth不想使用默认的user模型（表）怎么办

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

文章评论

欢迎您，K先生

评论列表