踩坑记录-前端请求如果携带Cookie信息,那么后端Access-Control-Allow-Origin不能为 *

踩坑记录-前端请求如果携带Cookie信息,那么后端Access-Control-Allow-Origin不能为*

知识点

前端发出的请求如果是附带身份验证(withCredentials:true)

而后端的Access-Control-Allow-Origin如果设置的是*

那么这个请求会失败,在Options预请求时会被拦截下来。

来源 MDN文档 :
https://developer.mozilla.org...

踩坑记录

在一个文件上传的接口出现问题。

  • 1.查看Network发现只有预请求Option
  • 2.查看console控制台,报错

踩坑记录-前端请求如果携带Cookie信息,那么后端Access-Control-Allow-Origin不能为 *

大概意思是说,在预请求时,请求就失败了。
Access-Control-Allow-Origin不能为 * ,当请求的证书模式为“include”时
这是你的请求没有通过的原因
这个证书模式初始化是通过Ajax的withCredentials属性控制的
  • 3.查看文件上传的vue代码
<el-upload 
          :action=path 
          :on-success="import_upload_ok" 
          :on-error="import_error" 
          :with-credentials="true" 
          :show-file-list=false 
          :headers=token 
          ref=dom>
        <el-button class="first-btn  upload-btn" type="primary">
          <span class="el-icon-plus"></span>
          同步快递信息
        </el-button>
      </el-upload>

可以看到我设置了:with-credentials="true"

  • 4.查看:with-credentials=“true”是什么意思,根据element文档

踩坑记录-前端请求如果携带Cookie信息,那么后端Access-Control-Allow-Origin不能为 *

得知with-credentials是用来设置是否支持发送cookie凭证信息的字段

总结

可以理解为这是一条http协议或者CORS的规则。

就是当request中设置了withCredentials : true,也就是请求携带了验证身份信息时,

response的Access-Control-Allow-Origin : *,(而是应该有请求身份过滤)

否则的话,请求会失败。

这里的解决办法有2个,

  • 一个后端设置Access-Control-Allow-Origin做一个身份过滤
  • 一个是前端设置withCredentials:false。也就是前端放弃传递Cookie信息

因为我这里还真没必要传递Cookie身份信息,所以我就选择设置withCredentials:false

相关推荐