js 跨域取cookie

在JavaScript中，跨域请求默认情况下是不允许携带Cookie的，这是由于浏览器的同源策略（Same-Origin Policy）所导致的。同源策略是一种安全机制，用于限制一个源（origin）的文档或脚本如何与另一个源的资源进行交互。

基础概念

同源策略：如果两个URL的协议、端口（如果有指定）和主机都相同，则这两个URL是同源的。跨域请求即是不满足同源条件的请求。

Cookie：是一种存储在用户浏览器上的小型数据片段，它可以包含用户的登录信息或其他与用户相关的数据。

跨域携带Cookie的优势

• 用户体验：用户在一个网站上登录后，可以在另一个网站上使用相同的身份信息，无需重新登录。
• 数据共享：可以在不同的域之间共享用户相关的数据。

类型

跨域请求主要分为两种类型：

1. 简单请求：使用GET、POST或HEAD方法，且HTTP头部信息有限制。
2. 预检请求（Preflight Request）：当请求不满足简单请求的条件时，浏览器会先发送一个OPTIONS请求进行预检。

应用场景

• 单点登录（SSO）：用户在一个应用中登录后，可以在其他应用中自动登录。
• 分布式系统：在不同的子域之间共享用户状态或认证信息。

解决跨域携带Cookie的问题

要使跨域请求携带Cookie，需要进行以下配置：

1. 服务器端设置

服务器需要在响应头中设置Access-Control-Allow-Origin为请求的源（不能是通配符*），并且设置Access-Control-Allow-Credentials为true。

例如，在Node.js的Express框架中，可以这样设置：

const express = require('express');
const app = express();

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'http://example.com'); // 允许的源
  res.header('Access-Control-Allow-Credentials', 'true'); // 允许携带凭证
  next();
});

// ...其他中间件和路由设置

2. 客户端设置

在发送AJAX请求时，需要设置withCredentials属性为true。

例如，使用XMLHttpRequest：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://api.example.com/data', true);
xhr.withCredentials = true; // 允许携带Cookie
xhr.send();

或者使用Fetch API：

fetch('http://api.example.com/data', {
  method: 'GET',
  credentials: 'include' // 允许携带Cookie
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

3. 注意事项

• Access-Control-Allow-Origin不能设置为*，必须是具体的源。
• 如果服务器端设置了Access-Control-Allow-Credentials为true，则Access-Control-Allow-Origin不能是通配符*。

解决问题的原因

跨域请求默认不携带Cookie是为了防止CSRF（Cross-Site Request Forgery，跨站请求伪造）攻击。通过设置Access-Control-Allow-Credentials为true并指定允许的源，可以在保证安全的前提下实现跨域携带Cookie。

解决问题的方法

按照上述服务器端和客户端的设置进行配置，确保请求能够正确携带Cookie，并且服务器能够接受和处理这些请求。

通过这些步骤，可以实现JavaScript跨域请求携带Cookie的功能，从而在多个域之间共享用户状态或认证信息。