什么是Cookie同源策略

Cookie同源策略是浏览器为保护用户隐私和安全而实施的一种限制措施。同源策略判断标准是域名和路径，而不是协议和端口。当浏览器接收到来自服务器的Cookie时，会将其存储在客户端，并在请求同源网站时自动发送相应的Cookie。这样，同源网站就可以获取已存储在客户端的Cookie信息，实现一些功能，比如用户登录状态的保持等。但是，由于安全考虑，Cookie同源策略限制了网站之间共享Cookie信息，只有在同一域名和路径下的网站才能共享Cookie信息。

具体来说，如果一个网站向浏览器发送一个包含Cookie的HTTP响应，浏览器会将这个Cookie保存起来，并在下次请求同一网站的页面时发送给服务器。但是，浏览器在发送请求时会检查请求的目标地址和请求来源地址是否同源。同源是指域名、端口和协议都相同。如果不同源，则不会携带该网站的Cookie信息。

以下是一个示例，假设在浏览器中打开了两个网页：

如果页面1中设置了一个Cookie，那么在页面2中是可以访问到这个Cookie的，因为它们的域名和路径相同。但是如果访问以下页面：

www.example.com:8080/page1.html

这个页面的端口号不同，因此被视为不同源，无法访问页面1设置的Cookie。

需要注意的是，Cookie同源策略的判断标准是域名和路径，而不是协议和端口。也就是说，只要域名和路径与Cookie上的一样，就会被视为同源，无论是http还是https，无论端口是多少。但是，如果Cookie上设置了Secure属性，那么就会限定此Cookie只能以https传送，以防止中间人攻击。

在实际开发中，我们可能会遇到需要跨域请求的情况，比如向第三方网站请求数据等。由于Cookie同源策略的限制，下面介绍一些常用的跨域方案

有哪些跨域方案

JSONP

JSONP是一种跨域请求的方案，它利用<script>标签的src属性可以跨域加载资源的特性，通过动态创建<script>标签来发送请求，并在URL中添加回调函数的参数，服务器端返回一段调用回调函数的JavaScript代码，实现跨域数据传输。

function jsonp(url, callback) {
  var script = document.createElement('script');
  script.src = url + '?callback=' + callback;
  document.body.appendChild(script);
}

jsonp('https://example.com/data', 'handleData');

function handleData(data) {
  console.log(data);
}

上面的代码中，我们定义了一个jsonp函数，它接收两个参数：要请求的URL和回调函数名。我们通过动态创建<script>标签来发送跨域请求，并在URL中添加回调函数名。服务器端返回的JavaScript代码会自动调用回调函数，我们在客户端定义回调函数来处理返回的数据。

CORS

CORS是一种浏览器和服务器之间协商跨域请求的机制，它通过在HTTP响应头中添加一些字段来表示服务器允许哪些源、哪些方法、哪些头部等进行跨域请求。如果要携带Cookie，还需要在请求头中设置withCredentials为true，并且服务器端不能设置Access-Control-Allow-Origin为*，而要指定具体的域名。我们使用axios举个例子:

import axios from 'axios';

axios.get('http://example.com/api/data', {
  withCredentials: true
}).then(response => {
  console.log(response.data);
}).catch(error => {
  console.error(error);
});

在上面的示例中，使用axios.get方法发送一个GET请求，第二个参数是一个配置对象，其中设置了withCredentials选项为true。

当然，后端也需要设置响应头:

response.setHeader("Access-Control-Allow-Origin", "http://example.com");

Nginx反向代理

在Nginx配置文件中，添加一个location块，用于代理目标服务器的请求。同时，为了避免CORS限制，需要在响应头中添加Access-Control-Allow-*字段，表示允许跨域访问。

server {
    listen 80;
    server_name example.com;

    location /api {
        proxy_pass http://api.example.com;
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
    }
}

总结

总之，跨域请求是前端开发中常见的问题，需要了解Cookie同源策略以及各种跨域请求方案的特点和限制，选择合适的方案来解决问题，并保障数据的安全性。

聊一聊Cookie同源策略及跨域方案

什么是Cookie同源策略

有哪些跨域方案

JSONP

CORS

Nginx反向代理

总结