cookie机制&跨域问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了cookie机制&跨域问题相关的知识,希望对你有一定的参考价值。

参考技术A 推荐阅读

当用户第一次访问并登陆一个网站的时候,cookie的设置以及发送会经历以下4个阶段:
客户端发送一个请求到服务器
服务器发送一个httpResponse响应到客户端,其中包含set-cookie的头部
客户端保存cookie,之后向服务器发送请求时,httpRequest请求中会包含一个Cookie的头部
服务器返回响应数据

cookie的域名
Cookie是不可以跨域名的,隐私安全机制禁止网站非法获取其他网站的Cookie。
正常情况下,同一个以及域名下的两个二级域名也不能交互Cookie,比如test1.jianshu.com与test2.jianshu.com,因为二者的域名不完全相同,如果想要jianshu.com名下的二级域名都可以使用该Cookie,需要设置Cookie的domain参数为jianshu.com,这样使用test1.jianshu.com和test2.jianshu.com就能访问同一个域名了。

下面是Chrome浏览器存储的一个cookie信息

设置的过程,服务器设置cookie的时候,需要指定cookie的domain,当domain与当前host的匹配不上的时候,responseHeader里的set-cookie不会设置成功。这也就是cookie不支持跨域问题。

js跨域问题前后端分离的跨域问题

最近在研究nodejs,php的前后端分离相关东西,在调用接口的时候碰到一些跨域的问题,经过一段时间的摸索,总结出来的一些东西

php采用的是yii框架,登录的机制或者调用接口都需要前端传递cookie进去,但是nodejsaxios接口等默认是不会传递cookie

  • 跨域解析:浏览器请求非本域名的网站资源,如果目标服务器没有设置跨域的情况下,浏览器是会阻止用户的请求的
  • 跨域的解决途径:可以配置后端服务转发的机制绕开跨域问题;也可以直接配置目标服务器的跨域配置

配置转发

搭建一个和前端处于同一域名下的代理服务器,代理服务器把前端的请求转发到真正的目标服务器,接收到的请求再转发给前端
这个一般都是在nginx,apache,iis里面进行转发的

目标服务器的跨域配置

如果不配置代理服务器的话,那应该配置目标服务器的跨域配置了,如果是二次请求(第一次预请求OPTIONS方法,第二次真正请求GET/POST/PUT/DELETE)那应该配置nginx和后端(PHP/JAVA)代码响应了

 ### nginx 配置
location / {
   if ($request_method = ‘OPTIONS‘) { 
       add_header Access-Control-Allow-Origin http://xc.com:9599; 
       add_header Access-Control-Allow-Headers *;
       add_header Access-Control-Allow-Methods POST,OPTIONS;
       add_header Access-Control-Allow-Credentials true;
       return 204; 
   }
   index  test.php ;
   autoindex  on;
   try_files $uri $uri/ /test.php?$args;               
}
//php配置 在返回的header里面添加相应头部  
header(‘Access-Control-Allow-Origin:http://frontend.com:9599‘);//容许跨域的前端站点
header(‘Access-Control-Allow-Headers:*‘);//容许传递的header
header(‘Access-Control-Allow-Credentials:true‘);//需要校验 配置此项结合NODEJS的配置项可以通过接口传递cookie
//nodejs 配置
const service = axios.create({
   baseURL: process.env.BASE_API, // api 的 base_url
   timeout: 5000, // 请求超时时间
   withCredentials: true // 允许携带cookie
})

前后端建议采用同域名不同端口,这样避免不同域名下cookie访问问题,配置Credentials是为了便于接口传递cookie,如果接口不用cookie可以不用配置此选项


以上是关于cookie机制&跨域问题的主要内容,如果未能解决你的问题,请参考以下文章

cookie在多域名下的跨域解决办法

js跨域问题前后端分离的跨域问题

知识点补充(跨域,Cookie和session,分布式系统状态管理,单点登录(SSO)的实现机制)

Ajax跨域请求携带cookie问题

关于Android的okHttp+webview的cookie跨域问题

2021-07-21 前端跨域携带cookie问题