跨域设置Cookie失效问题解决方案原理分析

当我们通过AJAX等方式在前端向服务端发送请求时，如果请求的地址与前端页面所在的域名不同，就会触发跨域问题。跨域问题是由浏览器的同源策略引起的。

在这种情况下，如果服务端返回了带有Set-Cookie头部的响应，则浏览器默认不会设置该Cookie，导致Cookie失效问题。

解决这个问题的方法是使用CORS（跨域资源共享）技术，在服务端的响应头中添加"Access-Control-Allow-Origin"字段，允许指定来源的请求访问服务端。同时，在AJAX请求中添加"withCredentials"字段，可以让浏览器携带Cookie标记，解决Cookie失效问题。

以下是一个示例：

服务端代码（Node.js）：

// 引入CORS模块
const cors = require('cors');
const express = require('express');

const app = express();

// 添加CORS中间件，允许所有来源的请求访问
app.use(cors());

app.get('/api/test', (req, res) => {
  // 在响应头中添加Access-Control-Allow-Origin字段
  res.setHeader('Access-Control-Allow-Origin', '*');
  // 返回响应
  res.send('Hello, world!');
});

app.listen(3000, () => {
  console.log('Server started at http://localhost:3000');
});

前端代码（使用jQuery发送AJAX请求）：

$.ajax({
  url: 'http://localhost:3000/api/test',
  xhrFields: {
    withCredentials: true // 让浏览器携带Cookie标记
  },
  success: (response) => {
    console.log(response);
  }
});

另一个示例：

服务端代码（PHP）：

<?php
header('Access-Control-Allow-Origin: *');

setcookie('test_cookie', 'test_value', time()+3600); // 设置Cookie

echo 'Hello, world!';
?>

前端代码（使用原生XMLHttpRequest发送AJAX请求）：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/api/test', true);
xhr.withCredentials = true; // 让浏览器携带Cookie标记
xhr.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    console.log(this.responseText);
  }
};
xhr.send();