跨域请求的 Cookie 携带策略

前端

2024-02-09 00:56:07

跨域请求：打破浏览器安全壁垒

在当今互联互通的世界中，网站和应用程序经常需要从其他源获取数据或资源。然而，浏览器出于安全考虑，默认情况下会限制跨域请求，也就是从一个源向另一个源发送 HTTP 请求。这被称为同源策略。

同源策略的限制

同源策略基于三个要素：

协议： HTTP 和 HTTPS 协议不同。
域名： example.com 和 example.net 域名不同。
端口： example.com:80 和 example.com:8080 端口不同。

如果跨域请求试图跨越这些限制中的任何一个，浏览器会出于安全原因将其阻止。

跨域请求携带 Cookie 的策略

如果跨域请求需要携带 Cookie，则需要采用特定的策略来实现。以下是四种常用的方法：

1. credentials 选项

credentials 选项允许跨域请求携带 Cookie。但是，需要同时设置 withCredentials 属性为 true，并且服务器端需要设置 Access-Control-Allow-Credentials 响应头为 true。

// 在发起跨域请求时，设置 withCredentials 为 true
const request = new Request('https://example.com/api/v1/user', {
  credentials: 'include',
});

// 在服务器端设置 Access-Control-Allow-Credentials 响应头为 true
const headers = new Headers();
headers.append('Access-Control-Allow-Credentials', 'true');

2. CORS 预检请求

CORS 预检请求是一种特殊的跨域请求，用于检查服务器是否允许跨域请求。预检请求会携带一个名为 Origin 的请求头，表明请求的来源。服务器收到预检请求后，会返回一个预检响应。预检响应中会包含一个 Access-Control-Allow-Origin 响应头，表明服务器是否允许跨域请求。

// 在发起跨域请求之前，先发送预检请求
const preflightRequest = new Request('https://example.com/api/v1/user', {
  method: 'OPTIONS',
  headers: {
    'Origin': 'https://mydomain.com',
  },
});

// 发送预检请求
fetch(preflightRequest).then((response) => {
  // 如果服务器允许跨域请求，则发送实际请求
  if (response.status === 200) {
    const request = new Request('https://example.com/api/v1/user', {
      credentials: 'include',
    });

    fetch(request).then((response) => {
      // 处理实际请求的响应
    });
  }
});

3. JSONP 跨域代理

JSONP 跨域代理利用 JSONP（JSON with Padding）技术实现跨域请求。JSONP 允许将 JavaScript 代码作为数据的一部分发送给服务器，然后服务器将数据和 JavaScript 代码一起返回。

// 在 HTML 页面中添加一个 script 标签，用于加载 JSONP 代理
const script = document.createElement('script');
script.src = 'https://example.com/jsonp/user?callback=myCallback';
document.head.appendChild(script);

// 定义一个回调函数，用于处理服务器返回的数据
function myCallback(data) {
  // 处理数据
}

4. 跨域资源共享 (CORS)

跨域资源共享 (CORS) 是一个 W3C 标准，用于实现跨域请求。CORS 允许浏览器向服务器发出跨域请求，而服务器可以控制是否允许该请求。

// 在发起跨域请求时，设置 CORS 请求头
const request = new Request('https://example.com/api/v1/user', {
  headers: {
    'Origin': 'https://mydomain.com',
  },
});

// 在服务器端设置 CORS 响应头
const headers = new Headers();
headers.append('Access-Control-Allow-Origin', 'https://mydomain.com');