解决跨域请求无法携带Cookie的问题

首页 HTTP 解决跨域请求无法携带Cookie的问题
~~~ 热烈庆祝通天技术网开业大吉 ~~~

问题描述

在A域下请求一个B域下的接口,因为无法携带cookies导致B接口无法识别身份。前端采用Vue+Axios实现。

问题原因

在提交验证的时候出现了无法识别身份的问题,因为前端工程单独启动后的端口localhost:8080和后端服务采用的的端口localhost:8081不一致形成了跨域。http协议本身是无状态的,需要凭证识别客户端身份,而跨域请求又限制携带cookie等凭证,这么一来服务端便无法识别来访对象,也就无法取到保存在session中的内容。

默认情况下,跨源请求不提供凭据(cookie、HTTP认证及客户端SSL证明等) 如果发送的是带凭据的请求,但服务器的相应中没有相关的头部,那么浏览器就不会把相应内容交给JavaScript,请求就无法得到结果的数据(浏览器得到了,但是我们请求的方法得不到,因为被浏览器拦截了)

解决方法

  • 后端
    Access-Control-Allow-Origin:*;也会导致cookie带不过去,不管withCredentials设置没有
// 响应头表示是否可以将对请求的响应暴露给页面
Access-Control-Allow-Credentials: true
// 允许跨域操作的具体域名
Access-Control-Allow-Origin: "http://localhost:8080"
// 允许跨域的HTTP方法
Access-Control-Allow-Methods: ["GET","POST","DELETE"]
// 列出将会在正式请求的 Access-Control-Expose-Headers 字段中出现的首部信息
Access-Control-Allow-Headers: ["Content-Type", "Authorization", "Accept"]
  • 前端
表示跨域请求时是否需要使用凭证
axios.defaults.withCredentials = true
资源下载
资源下载

本文没有可供下载资源

点击下载

标题:解决跨域请求无法携带Cookie的问题

分类:HTTP

链接:https://www.tongtian.icu/content/123

版权:通天技术网(www.tongtian.icu)所分享发布内容,部分为网络转载,如有侵权请立即联系方式,我们第一时间删除并致歉!

本文转载或引用了以下内容:

https://juejin.cn/post/6844903799446847496

真诚感谢以上无私奉献的作者,本站将一如既往秉承尊重原创的基本原则 ,呵护分享精神的火花。

评论 (评论区只画了下样式,还没做功能,这里短时间内不会更新,有问题弹射至网站底部工单系统)

电子邮件地址不会被公开。 必填项已用 * 标注

  • 通天技术网
    回复

    热烈庆祝通天技术网开业大吉

  • 通天技术网
    回复

    热烈庆祝通天技术网开业大吉

    相关文章