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

我用 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 也发送不出去,一筹莫展,不知道该怎么办。

阅读 289
评论
    3 个回答

    后台可以修改网络请求,使用 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'
    ]);

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

      相似问题
      推荐文章