【JavaScript】如何用JavaScript获取指定网站响应标头指定内容？

ZTOA10

最近在学习JavaScript方面的知识，本人小白没正儿八经系统学过计算机语言，纯粹是因为喜欢（实际是学这个可以消耗浮躁的时间），写代码全靠GPT，可能方向有跑偏，熟悉的大佬随便聊两句也行，也许能启发小弟往前走两步。
目的：
获取（需要登陆的）指定网页的「响应标头」的指定内容。
网址：
https://alidocs.dingtalk.com
议题由来：
上面的网址是个人日常做笔记的网址，挺好用的，最近和朋友聊天，复制了笔记的一张图片壁纸的地址给朋友。朋友访问后如图所示：

随便上传一张图片就可以获取到图片的路径作为研究对象，下面是获取路径的截图：

前面要补上https://alidocs.dingtalk.com/
完整的下载的URL1：https://alidocs.dingtalk.com/core/api/resources/img/5eecdaf48460cde5fe8078f410d3e291b0ce3199586f58e370729668ff47cd83fbf03f974c5a170939e8703ac5556d0d311f0bd38b2a38eabae12a79b7f17a52f4e6c6f6c26fb591badc9b09c099041940ab3d149cbe6dce27dbea0dda52f39c?x-oss-process=image/resize,w_1280,m_lfit,limit_1
复制得到的真实下载URL和访问时响应标头里的Location一致，下面是我粘贴并反问浏览器的过程截图

实际下载的URL2是：https://alidocs2.oss-cn-zhangjiakou.aliyuncs.com/res/Q35O8L7JP4AWO9Vb/img/f722358d-3da0-4dfc-b822-80690a96cb4a.png?Expires=1710387246&OSSAccessKeyId=LTAI1XUz8ModxrPd&Signature=jQkoZwNLO2oe6BmlIWL1IWmaAJ4%3D&x-oss-process=image%2Fresize%2Cw_1280%2Cm_lfit%2Climit_1&
抛出问题：
为啥URL1不登录的情况下没有访问权限，而实际URL2却可以不用登录就可以直接下载？
虽然实际URL2中有Expires=1710387246时间限制研究结果可能意义不大，但是还是很好奇背后的原理，这个理解通了或许能多学几个知识点（知其然，知其所以然！）。

此问题：1楼kittylang和6楼dxkite大佬已经做出释疑了，在此表示感谢！

需求
如何用JavaScript代码调用浏览器插件获取（需要登陆的）指定网页的「响应标头」的Locantion信息？

不求一次能解决我的疑问，大佬们聊几句指导一下思路也可以的。

4楼的网友

Pwaerm

给出的方案，涉及到个人我知识盲区目前我看不懂，感谢。

另外网友zetalpha提供的方式（再次表示感谢），因为使用的Quicker插件，限制于插件标签url 不可能有重定向，获取到的Location为null，所以特来求助是否有其他的解决办法。

[JavaScript] 纯文本查看 复制代码

$$var url = '{url}';
var headersJson = {};
fetch(url, {
  method: 'HEAD'
})
.then(response => {
  const headers = response.headers.entries();
  headersJson["location"]=response.headers.get('Location');
  headersJson["status"]=response.status;
  headersJson["cookie"]=document.cookie;
  for (const [key, value] of headers) {
    headersJson[key] = value;
  }
  
  console.log(headersJson);
})
.catch(error => {
  console.error('Error:', error);
});

//需要勾选quicker从脚本手动返回数据
setTimeout(function(){
  sendReplyToQuicker(
    true, 
    'ok', 
    headersJson, 
    qk_msg_serial
  );
}, 1000);

ZTOA10

目前通过Quicker插件的方式已经解决：
要获取重定向的网址，可以在fetch方法中加入credentials: 'include'选项来包含cookie信息，以确保已登录状态被保持。同时需要处理重定向，可以通过response.redirected属性来判断是否重定向，并通过response.url获取重定向后的网址，代码如下：

[JavaScript] 纯文本查看 复制代码

$$var url = '{url}';
var headersJson = {};
fetch(url, {
  method: 'HEAD',
  credentials: 'include'
})
.then(response => {
  if(response.redirected) {
    headersJson["redirectedUrl"] = response.url;
  }
  const headers = response.headers.entries();
  headersJson["status"] = response.status;
  for (const [key, value] of headers) {
    headersJson[key] = value;
  }
  
  console.log(headersJson);
})
.catch(error => {
  console.error('Error:', error);
});
 
setTimeout(function(){
  sendReplyToQuicker(
    true, 
    'ok', 
    headersJson, 
    qk_msg_serial
  );
}, 1000);

kittylang

你的需求，没用过Quicker插件，不清楚。

看了你的疑问，你没发现两个url域名不一样吗，一个是钉钉文档，另一个是阿里云对象存储，后者能访问只能说明他的权限设置的公有(并不确切，其实这里是临时鉴权，https://help.aliyun.com/zh/oss/developer-reference/ddd-signatures-to-urls 所以有过期时间)，而前者的服务器有鉴权。这两个链接除了返回内容一样，就没有其他关系了。好比学校有大门和狗洞，大门有保安，狗洞啥也没有，你不能说他们都能进入学校就一定要有关系吧

ZTOA10

kittylang 发表于 2024-3-14 11:36
你的需求，没用过Quicker插件，不清楚。

看了你的疑问，你没发现两个url域名不一样吗，一个是钉钉文档， ...

这回复好具象化，话糙理不糙，不一定要通过插件的方式解决，上面只是其中的一种方式，这种情况有其他的解决方法吗？或者思路也可以，感谢大佬的发言。

Pwaerm

浏览器插件里面可以通过 chrome.devtools.network.onRequestFinished.addListener
侦听


我正在使用的

[Asm] 纯文本查看 复制代码

// 几个参数依次为：panel标题、图标（其实设置了也没地方显示）、要加载的页面、加载成功后的回调
/*
chrome.devtools.panels.create('FL', 'fl.png', 'flPpanel.html', function (panel) {
    //console.log('自定义面板创建成功！'); // 注意这个log一般看不到
    chrome.runtime.sendMessage({
        type: "devtoolsGetContent",
        data: 'DevTools Panel Created successfully!'
    });
});
*/
chrome.devtools.network.onRequestFinished.addListener(function (request) {
    //此处的console.log无法查看，只能传到background.js中查看
    /*
    chrome.runtime.sendMessage({
        type: "devtoolsGetContent",
        data: { request }
    });
    */
    //request.request.postData.text//就是发送出去的数据
    request.getContent(function (content, encoding) {
        chrome.devtools.inspectedWindow.eval('try{window.getDevToolsRequest(' + JSON.stringify({ url: request.request.url, data: content, request: request.request }) + ')}catch(e){};');
        return;
        chrome.runtime.sendMessage({
            type: "devtoolsGetContent",
            data: { url: request.request.url, data: content }
        });
    })
});

ZTOA10

Pwaerm 发表于 2024-3-14 11:41
浏览器插件里面可以通过 chrome.devtools.network.onRequestFinished.addListener
侦听

感谢大佬的回复，可能对于小白的我已经是到了我的知识盲区了，我研究一下，谢谢！

dxkite

OSS的文件一般都是要通过鉴权才能访问的，URL1中的文件域名是你当前登陆网站的域名，访问的时候会自动携带网站的登录信息（cookie) 因此会进行一次鉴权，鉴权通过之后才会生成URL2，也就是直连OSS的临时地址（携带了过期时间以及访问token)
因此 URL1 需要登录才能访问, URL2可以直接访问

ZTOA10

dxkite 发表于 2024-3-14 11:57
OSS的文件一般都是要通过鉴权才能访问的，URL1中的文件域名是你当前登陆网站的域名，访问的时候会自动携带 ...

感谢大佬的细心回复！是的，你的表述和前面kittylang大佬说的好像是一个意思，谢谢大佬们给我解答了疑惑，还剩下如何获取这个重定向的URL2了。

blackfrey

ZTOA10 发表于 2024-3-14 12:01
感谢大佬的细心回复！是的，你的表述和前面kittylang大佬说的好像是一个意思，谢谢大佬们给我解答了疑惑 ...

但是按照前几楼的回复，这个URL2是个临时链接，会过期的，你获取了又有什么用呢？

ZTOA10

blackfrey 发表于 2024-3-14 12:22
但是按照前几楼的回复，这个URL2是个临时链接，会过期的，你获取了又有什么用呢？

我的目的不是获取这个URL2是个临时链接，也有在里面说明获取这个意义不大，如果想要直接下载复制链接即可，我是想学习如何获取这个知识点，以后遇到类似的就可以动手解决了。

nullworld

kittylang 发表于 2024-3-14 11:36
你的需求，没用过Quicker插件，不清楚。

看了你的疑问，你没发现两个url域名不一样吗，一个是钉钉文档， ...

醍醐灌顶