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

阅读 229
评论
    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'
    ]);

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

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

        • 1.1k

        这个与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

          撰写回答

          登录后参与交流、获取后续更新提醒

          相似问题
          推荐文章