Chrome 扩展在后台发出的请求如何携带前台 cookie？

Question

我用 Chrome 扩展程序从 https://www.pixiv.net/artworks/84085174 下载一张图片，图片是跨域的。https://i.pximg.net/img-original/img/2020/09/01/16/22/11/84085174_p0.png

前台直接请求会被跨域策略阻止，我在后台脚本 background.js 里可以请求，但是 403，因为需要携带 cookie。不知道怎么解决。

后台网址是 chrome 扩展的网址：
chrome-extension://penkncbihcdfkhngfonjppnnkhodlali/_generated_background_page.html
fetch 或 xhr，虽然它们可以发送 cookie，但因为是在后台页面执行的，无法携带前台页面的 cookie。而且它们都不支持在请求头里设置自定义 cookie，我就算获取了前台的 cookie 也发送不出去，一筹莫展，不知道该怎么办。

Answer 1

后台可以修改网络请求，使用 chrome.webRequest.onHeadersReceived API，给每个请求的 response headers 都添加 Access-Control-Allow-Origin : *，那么前台发出的所有请求都可以跨域。（如果此请求本来就有这个标头，就先删掉然后添加）

先在 manifest.json 里申请权限：

"permissions": ["webRequest", "webRequestBlocking", "*://*/*" ]

然后在后台代码（background.js）里修改网络请求：

function removeMatchingHeaders(headers: any, regex: any) {
  for (var i = 0, header; (header = headers[i]); i++) {
    if (header.name.match(regex)) {
      headers.splice(i, 1);
      console.log('Removing header "' + header.name + '":"' + header.value + '"');
      return;
    }
  }
}

function responseListener(details: any) {

  removeMatchingHeaders(details.responseHeaders, /access-control-allow-origin/i);
  details.responseHeaders.push({ name: 'Access-Control-Allow-Origin', value: '*' });

  return { responseHeaders: details.responseHeaders };
}

chrome.webRequest.onHeadersReceived.addListener(responseListener, {
  urls: ['*://*/*']
}, [
  'blocking',
  'responseHeaders',
  'extraHeaders'
]);

可以根据自己需要把网址范围 *://*/* 修改一下，避免影响所有网络请求。

Answer 2

可以把代码注入到前台，由前台获取图片，然后传回后台。

Answer 3

这个与chrome关系不大，相信在其它浏览器比如firefox中也会发生相同的错误。根源在于浏览器的保护策咯上了。在发生CORS请求时，为了保证该请求是被跨域的地址所允许的(www.pixiv.net)，所以浏览器会发起options请求(这个请求被最新版本的chrome隐藏了，firefox中可以查看到)，只有接收值中的Access-Control-Allow-Origin与前台用户访问的地址相匹配时，浏览器才可能允许发起后续的跨域请求。

这也是为什么你的控制台报：has been blocked by cors policy: No Access-Control-Allow-Origin header is .... 的原因。

所以如果www.pixiv.net这个站点也是你负责的，那么添加允许跨域信息，当浏览器发起特定的options请求时，在header中返回Access-Control-Allow-Origin属性，并在其值中包含用户访问的当前站点（也可以使用通配符 * ）。

当然了，即使是有了Access-Control-Allow-Origin，默认情况下cookie属于敏感信息，这个值也是默认被禁止发送给跨域地址的。这个小孩没娘说起来话长，具体怎么做怕是你还得辛苦自己查一下。

祝好运。

参考资源：详解CORS