主页 / 问题 / 634608
Accepted
Tihon
Asked:2020-03-02 22:22:47 +0000 UTC2020-03-02 22:22:47 +0000 UTC

如何使用 fetch() 根据请求传递标头？

  • 772

当您尝试向服务器发出请求时 - 不会发送标头。

<!DOCTYPE html>
<head>
  <title>Devpage</title>
</head>
<body>
</body>
<script type="text/javascript">
  const myHeaders = new Headers();
  myHeaders.set('Authorization', 'Basic dXNlcjpwd2Q='); // user:pwd
  fetch(
    'http://tihonv.pythonanywhere.com/', {
      method: 'POST',
      mode: 'no-cors',
      headers: myHeaders,
    }).then((resp) => console.log(resp));
</script>

发送请求时，不发送标头。

您可以通过在此处发送请求进行检查

javascript

2 个回答

  1. Best Answer

    事实上Authorization，它们no-cors是相互排斥的东西。您自己禁止传输登录名和密码，所以现在不要生气；）

    要传递此标头，您仍然需要将mode: "cors".

    在您的情况下，如果您在同一个站点内执行所有这些操作，那应该足以让标题Autorization通过。

    下面我们考虑发送请求的站点和接收请求的站点是不同站点的情况。跨域查询更复杂。（example.com 是站点fetch，yourserver.com 是发送请求的站点）

    发送这样的跨域请求时，浏览器会先向服务器发送OPTIONS请求：

    OPTIONS / HTTP/1.1
Host: yourserver.com
Origin: http://example.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: authorization

    为此，您的服务器应该回答它允许您传输所有这些，并且它允许所有这些到发送请求的站点（来源）：

    HTTP/1.1 200 OK
Access-Control-Allow-Headers: authorization
Access-Control-Allow-Origin: http://example.com
(альтернатива:) Access-Control-Allow-Origin: *

    只有这样，当浏览器收到来自服务器的发送许可时，它才会发送一个带有以下不幸信息的真实 POST 请求Authorization：

    POST / HTTP/1.1
Host: yourserver.com
Origin: http://example.com
Authorization: Basic dXNlcjpwd2Q=

    并且在响应 POST 请求时，yourserver.com 必须仍然记得表明它允许 example.com 这样做：

    HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://example.com
(альтернатива:) Access-Control-Allow-Origin: *

    如果你错过了其中任何一个，你的fetch将无法工作。这些是偏执的现代浏览器

    • 2

  2. 尝试这个

    const req_url = 'http://localhost:5000/'
let resp = fetch(req_url, {
method: 'POST',
mode: 'no-cors',
headers: {
  'Authorization'              : 'Basic dXNlcjpwd2Q=',
},

}).then((resp) => resp)
    • 0

相关问题