Cookie跨域共享

一、Cookie跨域共享方法

在Web开发中，Cookie是一种跨页面跟踪用户行为的机制。但是，在跨域请求时，浏览器默认不会发送Cookie。那么该如何解决Cookie跨域共享的问题呢？目前有以下几种方法：

1. 使用iframe实现跨域请求。


function createIframe(){
    var iframe = document.createElement("iframe");
    iframe.src = "http://www.example.com/getcookie";
    iframe.style.display = "none";
    document.body.appendChild(iframe);
}

window.onload = function(){
    createIframe();
}

2. 使用jsonp实现跨域请求。


$.ajax({
    url:"http://www.example.com/getcookie",
    dataType:"jsonp",
    success:function(data){
        console.log(data);
    }
});

3. 使用CORS（跨域资源共享）实现跨域请求。


app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By",' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});

二、Cookie在不同浏览器共享吗

Cookie在同一浏览器下是可以共享的，但是不同浏览器之间Cookie是不共享的。也就是说，在使用Chrome浏览器访问一个网站时得到的Cookie，不能在使用Firefox、IE等其他浏览器访问同一网站时使用。

三、Cookie跨域共享方式

当前主流的Cookie跨域共享方式有以下几种：

1. 子域名共享Cookie。

比如，我们在开发的时候，后端提供了v1.domain.com和v2.domain.com两个子域。为了使得v1和v2共享Cookie，我们需要在设置Cookie时加上domain参数，将Cookie的域名限制到主域名下。

例如，在v1.domain.com设置Cookie时，代码应该是这样的：


Set-Cookie: key=value; domain=.domain.com; path=/;

这时，v2.domain.com也可以共享key=value这个Cookie了。

2. 代理跨域共享Cookie。

当我们的请求需要经过代理服务器时，可以将请求转发到同一个域名下的不同端口，这样就可以共享Cookie了。例如，假设服务器在8080端口，而我们需要共享Cookie，可以使用Nginx配置一个反向代理来实现。


server {
    listen 80;
    server_name xxx.com;
    location / {
        proxy_pass http://127.0.0.1:8080/;
        proxy_set_header Host $host;
    }
}

3. JSONP跨域共享Cookie。

这种方式需要服务端做一些处理，将Cookie信息直接返回给前端。


res.jsonp({ cookies: req.headers.cookie })

四、Cookie可以跨域访问吗

不可以。由于浏览器所遵循的“同源策略”，JavaScript在访问另一个域名下的网页时是不允许访问别的网页的Cookie的。

五、实现Cookie跨域共享

实现Cookie跨域共享的具体方法在上面已经讲解得很清楚了，这里我们再给出一些特定场景下的实现方案。

1. 在移动端中，由于使用的是Webview，可以使用Webview提供的Cookie共享功能实现。

2. 在前后端分离的项目中，可以使用JWT（Json Web Token）来进行身份验证，并用它来代替Cookie来实现跨域共享。

六、跨域携带cookie

我们可以使用XMLHttpRequest对象来实现跨域请求并携带Cookie。


var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.open('GET', 'http://www.example.com/getcookie', true);
xhr.send();

七、Cookie跨域

Cookie跨域是指在不同的域名下，一个请求发送到某个域名的服务器时，这个域名的服务器设置了一个Cookie，下次再发送到同一域名的服务器时，就会携带上之前设置的Cookie。

八、Cookie跨域解决方法

在上文已经讲解了多种方法来解决Cookie跨域共享的问题。除此之外，我们还可以使用iframe或JSONP来实现Cookie的跨域共享。

九、Cookie为什么不能跨域访问

这是因为浏览器遵循了“同源策略”，即JavaScript脚本只能访问与其所属文档的域名、端口号、协议相同的其他文档。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/185970.html