踩坑记录-前端请求如果携带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控制台，报错

大概意思是说，在预请求时，请求就失败了。
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文档

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

总结

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

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

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

否则的话，请求会失败。

这里的解决办法有2个，

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

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