美文网首页前端大杂烩
localstorage和cookie的跨域解决方案

localstorage和cookie的跨域解决方案

作者: 王希桐 | 来源:发表于2020-03-17 10:29 被阅读0次

cookie跨域

业务场景

场景1: 同一个主域下边的跨域问题

  • 百度www域名下边登录了,发现yun域名下面也自然的登录了

path

cookie一般都是用于用户访问页面而被创建的,但是==并不是只有在创建cookie的页面才可以访问这个cookie== 在默认情况下,处于安全方面的考虑,只有与创建cookie的页面处于同一个目录或者在创建cookie页面的子目录下的网页才可以访问。如果希望其父级或者整个网页都能使用cookie就需要进行路径的设置。

path表示cookie所在的目录,haorooms.com默认为/,就是根目录。在同一个服务器上有目录如下

/post/,/post/id/,/tag/,/tag/haorooms/,/tag/id/

现在假设
cookie1的path为/tag/,
cookie2的path为/tag/id/,
那么tag下的所有页面都可以访问到cookie1,而/tag/和/tag/haorooms/的子页面不能访问cookie2,因为cookie2能让其path路径下的页面进行访问。
让这个设置的cookie能被其他目录或者父级的目录访问的方法

document.cookie = "name = value; path=/";

domain

domain表示的是cookie所在的域,默认是请求的地址

如网址为 http://www.haorooms.com/post/long_lianjie_websocket ,那么domain默认为www.haorooms.com

而跨域访问,

如域A为love.haorooms.com,域B为resource.haorooms.com,

那么在域A生产一个令域A和域B都能访问的cookie就要将该cookie的domain设置为.haorooms.com;

如果要在域A生产一个令域A不能访问而域B能访问的cookie就要将该cookie的domain设置为resource.haorooms.com。

这样,我们就知道为什么www.百度 和yun.baidu共享cookie,我们只需要设置domain为.baidu.com就可以了【注:点是必须的】

场景2:

淘宝登录了,发现天猫也登录了,淘宝和天猫是完全不一样的两个域名

cookie跨域解决方案一般有如下几种:

1、nginx反向代理

反向代理(Reverse Proxy)方式是指以代理服务器来接受Internet上的连接请求,然后将请求转发给内部网络上的服务器;并将从服务器上得到的结果返回给Internet上请求连接的客户端,此时代理服务器对外就表现为一个服务器。

反向代理服务器对于客户端而言它就像是原始服务器,并且客户端不需要进行任何特别的设置。客户端向反向代理 的命名空间(name-space)中的内容发送普通请求,接着反向代理将判断向何处(原始服务器)转交请求,并将获得的内容返回给客户端,就像这些内容 原本就是它自己的一样。

nginx配置如下:

upstream web1{
     server  127.0.0.1:8089  max_fails=0 weight=1;
}
upstream web2 {
     server 127.0.0.1:8080    max_fails=0 weight=1;
}

    location /web1 {
        proxy_pass http://web1;
        proxy_set_header Host  127.0.0.1;
        proxy_set_header   X-Real-IP        $remote_addr;
        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;

        proxy_set_header Cookie $http_cookie;
        log_subrequest on;
    }

    location /web2 {
        proxy_pass http://web2;
        proxy_set_header Host  127.0.0.1;
        proxy_set_header   X-Real-IP        $remote_addr;
        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header Cookie $http_cookie;
        log_subrequest on;
    }

2、jsonp方法

其实,淘宝和天猫cookie的传递,应该也是利用jsonp来进行的,如下图:

image.png

打开淘宝首页,回向天猫发送一个请求。

说白了,这个jsonp 的cookie跨域和我们平时用的jsonp跨域是一样的,关于jsonp跨域,请看 浏览器跨域解决方案

jsonp会通过回调函数来处理服务器端返回的数据,因为返回的可以执行的js代码(也就是重写cookie的path和域),然后自动执行返回的js代码,从而达到目的。

localstorage跨域

使用postMessage和iframe

假设有a.haorooms.com/text.html和b.haorooms.com/text.html两个页面。

通过a.haorooms.com/text.html页面去修改b.haorooms.com/text.html页面的本地数据:

  1. 在a.haorooms.com/text.html页面创建一个iframe,嵌入b.haorooms.com/text.html页面。
  2. a.haorooms.com/text.html页面通过postMessage传递指定格式的消息给b.haorooms.com/text.html页面。
  3. b.haorooms.com/text.html页面解析a.haorooms.com/text.html页面传递过来的消息内容,调用localStorage API 操作本地数据。
  4. b.haorooms.com/text.html页面包装localStorage的操作结果,并通过postMessage传递给a.haorooms.com/text.html页面。
  5. a.haorooms.com/text.html页面解析b.haorooms.com/text.html页面传递回来的消息内容,得到 localStorage 的操作结果。

原文链接

相关文章

  • JS知识点

    1、前端常见跨域解决方案 2、cookie,localStorage,SessionStorage三者的区别 3、...

  • localStorage 如何跨域通信?

    cookie 跨域主要记住一个单词,如下: 看看 localStorage 如何跨域通信? 因为要跨域所以我们需要...

  • 知识点---不定时更新

    cookie\session\localstorage跨域webpack手写ajax手写bind排序算法css常用...

  • localstorage和cookie的跨域解决方案

    cookie跨域 业务场景 场景1: 同一个主域下边的跨域问题 百度www域名下边登录了,发现yun域名下面也自...

  • 跨域问题以及解决

    一、什么是跨域问题? 1.1、什么是跨域? 均一样的情况下,才允许访问相同的cookie、localStorage...

  • 美团一面

    1.垂直居中,垂直水平居中2.CSS3动画3.跨域解决的方法4.cookie,localStorage,sessi...

  • localstorage跨域&&跨浏览器

    localstorage无法跨域(同源策略的限制),无法跨浏览器; localstorage可通过storage ...

  • Web前后端跨域问题处理

    跨域问题有前台跨域(iframe间)和后台跨域。 前台跨域的解决方案可以采用跨域文档通讯(Cross domain...

  • 带cookie的跨域1

    带cookie的跨域1 1、Access-Control-Allow-Origin:*解决不了带Cookie的跨域...

  • cookie 跨域访问的解决方案

    资料: 理解Cookie和Session机制 Ajax跨域请求中的Cookie问题(默认不带cookie等凭证) ...

网友评论

    本文标题:localstorage和cookie的跨域解决方案

    本文链接:https://www.haomeiwen.com/subject/ztvzehtx.html