跨域踩坑之坑死人系列

问题

在 新增和修改的 postput 请求的时候突然报了403错误

错误信息

于是赶紧去 network 一看究竟,结果发现我的post请求和put请求全部变成了options请求

错误描述

错误信息

这就让我很奇怪了,然后我又打开 postman和接口文档分别去测试,结果发现都是正常的,于是我又去后端同学那里去看了一下线上也是没问题的,于是果断从 options请求下手找问题所在

对于 options请求,RFC2616标准(现行的HTTP/1.1)中如下描述

options method

大概意思是说, OPTIONS请求方法的主要用途有两个:
  1. 获取服务器支持的HTTP请求方法;
  2. 用来检查服务器的性能。
ps: 其实上图描述我也看不懂 😂

OPTIONS 方法理解

在跨域请求的环境下,如果后端没有允许跨域, 那么前端在请求的时候会发两次请求 第一次是发送一个options ,意思是确保请求发送是安全的 一般post, put, delete请求都会修改服务器资源,所以浏览器会先发送一个请求问问服务器是否允许这次请求 如果请求被允许那么将会发送第二次请求,也就是真正的请求


问题所在

总感觉问题在我这里 是我本地肯定是跨域的,但是部署到线上之后就不是跨域了,因为线上的 ip 地址是和我请求的地址相同,那么我本地跨域请求发送肯定就发生了 options 预检请求,结果后端没有允许跨域, options 请求就预检失败肯定就无法更新服务器数据了

  • 如果我发送 options 请求的时候被拒绝了,那么问题自然就出现在了跨域这里

解决跨域的常用办法

  1. 在 vue-cli 项目中可以使用 proxyTable进行反向代理解决
  2. 使用跨域插件解决
  3. 在开发环境下解决ajax跨域问题

第一种方式我并没有去使用,我本地确实安装了跨域插件,第三种是我初次使用的方法,后来用插件代替的,结果问题就出在这个插件上

这个插件对于解决跨域不是很稳定,将插件卸载后使用了上面第三种方法,果然!不再发送 options请求

总结

插件没有什么问题,可能因开发环境而异,插件其实还是挺好用的,可能我的环境不适合

如果再次踩到了这个坑
  1. 先检查自己请求的基本数据有没有错误
  2. 询问一下后端
  3. 检查跨域
  4. 实在解决不了找技术老大请教