跨域XHR请求中自动发送Cookie的实现方案咨询

1. 修正CORS配置（修改www.mysite.com后端） #

你之前用插件把Access-Control-Allow-Origin设为*是核心问题——浏览器明确禁止*与请求携带credentials（Cookie、认证信息等）同时使用。你需要在www.mysite.com后端调整CORS响应头：

• 将Access-Control-Allow-Origin设置为请求的Origin值（即https://www.somesite.com，也可动态获取请求头里的Origin并返回，适配性更强）
• 添加Access-Control-Allow-Credentials: true
• 若请求包含自定义头，需在Access-Control-Allow-Headers中列出这些头

比如Node.js/Express的配置示例：

app.use((req, res, next) => {
  const origin = req.headers.origin;
  // 可添加白名单校验，仅允许指定源的请求
  if (origin === 'https://www.somesite.com') {
    res.setHeader('Access-Control-Allow-Origin', origin);
  }
  res.setHeader('Access-Control-Allow-Credentials', 'true');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  next();
});

2. 调整XHR请求配置（插件注入的脚本） #

在注入到www.somesite.com页面的XMLHttpRequest代码中，必须开启withCredentials属性，告知浏览器携带Cookie：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.mysite.com/api/data', true);
xhr.withCredentials = true; // 关键：开启凭证携带
xhr.onload = function() {
  // 处理响应逻辑
};
xhr.send();

如果用fetch API替代XHR，对应配置为credentials: 'include'。

3. 修改www.mysite.com的Cookie设置 #

若你的Cookie设置了SameSite=Lax或SameSite=Strict，浏览器会在跨域请求中自动拒绝携带它。需在www.mysite.com设置Cookie时调整参数：

• 设置SameSite=None：允许跨域场景携带Cookie
• 必须同时设置Secure：SameSite=None强制要求Cookie仅通过HTTPS传输
• 确保Domain和Path配置正确，覆盖你需要访问的mysite路径

比如Node.js后端设置Cookie的示例：

res.cookie('auth_token', 'your_token_value', {
  domain: 'mysite.com',
  path: '/',
  secure: true,
  httpOnly: false, // 若需前端脚本访问则设为false，否则true更安全
  sameSite: 'None',
  maxAge: 24 * 60 * 60 * 1000
});

4. 配置插件权限 #

在浏览器插件的manifest.json中，添加对www.mysite.com的访问权限，确保插件可向该域名发起请求：

{
  "permissions": [
    "https://www.mysite.com/*"
  ]
}

额外注意 #

• 若www.somesite.com是HTTP协议，而www.mysite.com是HTTPS，Secure Cookie无法在HTTP环境下被携带，需确保两个站点均使用HTTPS
• 严禁在Access-Control-Allow-Origin中使用通配符*，必须指定具体源，否则浏览器会拒绝携带credentials

内容的提问来源于stack exchange，提问作者user1617735