使用 JavaScript 中的自定义请求标头导航到 URL答案

【问题标题】：Navigate to URL with custom request headers in JavaScript使用 JavaScript 中的自定义请求标头导航到 URL
【发布时间】：2016-03-15 14:51:23
【问题描述】：

问题就像标题一样。

在命令行中，我们可以输入：

curl -H "header_name: header_value" "http://example"

使用如上所示的自定义请求标头导航到http://example。

问：如果我需要编写一个 JavaScript 来做同样的事情，我应该怎么做？

var url = 'https://example';
var myRequest = new XMLHttpRequest();
myRequest.open('GET', url ,false);
myRequest.setRequestHeader('header-name','header-value');
myRequest.send();

我试过这段代码，没有语法错误，但页面没有改变。因此，我真的不知道我是否修改了请求标头。

【问题讨论】：

这个问题已经有很多答案stackoverflow.com/questions/1268673/…
@VitalyKulikov Thx 发表评论，我在发布问题之前做了一些研究，但似乎它们没有帮助。您链接中的答案无济于事。我在问题中分享了我的代码，希望对您有所帮助。
你提出了一个请求，但你没有响应，这就是为什么页面没有改变
@VitalyKulikov 哦，我明白了。实际上，但我对 Javascript 还是很陌生。我试过把window.open(url)放在最后，什么也没发生

标签： javascript security http networking request-headers

【解决方案1】：

你可以这样处理：

var req = new XMLHttpRequest();
req.open('GET', 'http://example', true); //true means request will be async
req.onreadystatechange = function (aEvt) {
  if (req.readyState == 4) {
     if(req.status == 200)
      //update your page here
      //req.responseText - is your result html or whatever you send as a response
     else
      alert("Error loading page\n");
  }
};
req.setRequestHeader('header_name', 'header_value');
req.send();

【讨论】：

非常感谢，它帮助我理解了 XMLHttpRequest() 的使用。还有一个问题，它是否支持添加装扮好的请求头？例如请求头“x-api-key”通常出现在每个请求头中。
是的，我的回答中有例子req.setRequestHeader('header_name', 'header_value');
我已经使用window.location.href = url; 尝试了您的代码来更新我的页面。该网站导航到url，但请求标头不适用。我是否使用了错误的方式来更新页面？
当你调用 req.send();请求使用适当的标头发送。当你调用 window.location.href = url;发送另一个请求。您需要通过简单的 DOM 更改来更新此语句中的页面 if(req.status == 200)。一旦您使用这种方法，您的网站就会开始成为一个单页应用程序。
非常感谢您的清晰解释。正如您提到的，req.responseText 保存了我从url 的GET 方法获得的所有消息，我已经尝试过document.write(req.responseText)。页面会根据我的需要更新。