记录在一次前后端分离的项目开发中遇到的坑

Ken专注后端技术 2019-12-10

问题如下图:

记录在一次前后端分离的项目开发中遇到的坑

在一次实际的项目开发中,我负责前端开发,使用的是vue+axios,后台使用的是php,由于我们的开发环境处于不同的域名和端口下,

所以出现了跨域问题,当然php服务端 可以直接解决这个问题,但是后端设置之后,前端每次都会先发出options请求,然后再post请求,

这说白了,就是每个接口请求两次。我们来分析下原因:

出于安全考虑,并不是所有域名访问后端服务都可以。其实在正式跨域之前,浏览器会根据需要发起一次预检(也就是option请求),用来让服务端返回允许的方法(如get、post),被跨域访问的Origin(来源或者域),还有是否需要Credentials(认证信息)等。那么浏览器在什么情况下能预检呢?

解决方案:

 1,axios 请求头中有其它参数(由于开发需求,请求头中确实加入了其它的一些参数,例如token)

记录在一次前后端分离的项目开发中遇到的坑

解决办法:把异常参数去掉即可

2,由于axios请求头中默认:Content-Type:application/json,我们改为formdata 向后台发送即可

axios.defaults.headers[‘Content-Type‘] = ‘application/x-www-form-urlencoded‘;

这样改完之后, 还需要把数据格式化,接着看:

<script type="text/javascript" src="https://cdn.bootcss.com/qs/6.5.1/qs.min.js"></script>

引入完这个库之后,把传递的数据进行 

Qs.stringify({
     mobile:this.mobile,
     verfiyCode:this.sms_code,
}),

记录在一次前后端分离的项目开发中遇到的坑

 是不是 ok了,然后我们接着发请求,那么options请求就没了。

相关推荐