在 Fetch 响应中使用 Location 标头答案

【问题标题】：Using a Location header in Fetch response在 Fetch 响应中使用 Location 标头
【发布时间】：2021-02-26 00:25:52
【问题描述】：

我正在使用获取请求，并且我想检测响应中的位置标头，以便我可以根据是否存在位置标头做出不同的反应，如下所示：


  fetch(request)
  .then(response => {
    for(var keyValPair of response.headers.entries())
    {
      alert(keyValPair[0]);
      if(keyValPair[0] === 'Location')
      {
        alert('TRYING TO RELOCATE');
        window.location.replace(keyValPair[1]);
        return;
      }
    }
    if(response.ok)
    {
      return response.text();
    }
    else
    {
      document.getElementById(targetBlock).innerHTML = 'ERROR! ERROR! There has been an ERROR!'
    }
  })
  .then(removeBlock('alertMessageBlock'))
  .then(function(text){document.getElementById(targetBlock).innerHTML = text;})
  .catch(error => console.log('There was an error:', error))
}

它获取的php文件如下：

<?php
require __DIR__ . '/../../private_templates/Template/varsConstants.php';
require_once __DIR__ . '/../../private_templates/Modules/functions.php';
require __DIR__ . '/../../private_templates/Modules/dbConnection.php';
require_once __DIR__ . '/../../private_templates/Modules/DatabaseTable.php';
require_once __DIR__ . '/../../private_templates/Modules/Authentication.php';
require_once __DIR__ . '/../../private_templates/Modules/memberClass.php';

if (!isset($alertMessage))
{
  $alertMessage = [];
}
$membersTable = new DatabaseTable($dbc, 'member', 'memberID');
$authentication = new Authentication($dbc, $membersTable, 'email', 'pass');
if ($authentication->isLoggedIn())
{
?>
<form data-targetBlock="adminMembers" class="fetchForm" action="<?=ADDRESS ?>/MAINhubs/privateHub.php" method="post">
  <fieldset>
    <legend>Search for Members By:</legend>
    <label for="searchType">Choose Search Parameter:</label>
    <select name = "searchType">
      <option value = "none" selected>Choose parameter to search by</option>
      <option value = "registrationDate">Registration Date</option>
      <option value = "firstName">First Name</option>
      <option value = "lastName">Last Name</option>
      <option value = "email">Email</option>
      <option value = "company">Company</option>
      <option value = "city">City</option>
      <option value = "region">Region</option>
      <option value = "country">Country</option>
    </select>
    <button type="submit" name="formTarget" value="adminMembersSearch">Load Members Search Form</button>
  </fieldset>
</form>
<div id="adminMembers">
</div>
<?php
}
else
{
  header('Access-Control-Expose-Headers: Location');
  header('Location: ' . ADDRESS);
}
require_once __DIR__ . '/../../private_templates/Sections/alertMessageBlock.php';
?>

提取工作正常，位置标头工作正常，但我拦截标头不起作用，我希望整个窗口重定向到该位置，而不是将其插入到 targetBlock 中。我觉得我需要公开位置标头，但我不知道该怎么做...有什么帮助吗？

【问题讨论】：

标签： javascript php http-headers fetch

【解决方案1】：

使用 Location 标头不起作用，因此我创建了一个自定义标头：

else
{
  header('goto: ' . ADDRESS);
}

然后我能够看到获取响应中的标头并在此处按预期使用它。


  fetch(request)
  .then(response => {
    for(var keyVal of response.headers.entries())
    {
      if(keyVal[0] === 'goto')
      {
        window.location.href = keyVal[1];
        return;
      }
    }
    if(response.ok)
    {
      return response.text();
    }
    else
    {
      document.getElementById(targetBlock).innerHTML = 'ERROR! ERROR! There has been an ERROR!'
    }
  })
  .then(removeBlock('alertMessageBlock'))
  .then(function(text){document.getElementById(targetBlock).innerHTML = text;})
  .catch(error => console.log('There was an error:', error))
}

【讨论】：