Question

有谁知道是否可以使用EventSource发送基本的http身份验证凭据？

Answer 1

EventSource是关于服务器向客户端发送事件的。我认为您需要双向通信进行身份验证。您将如何发送实际凭证？

但是，WebSockets可以实现这一目标。那是你在找什么？

更新

如4esn0k所述，您可以通过使用Cookie实现您的目标。 Cookie与浏览器建立连接的初始请求一起发送。因此，只需确保在启动任何EventSource连接之前设置cookie的会话标识符。

Answer 2

如果你谈论cookies（不是http auth）：

EventSource使用http，因此使用EventSource连接请求发送cookie。

Http auth应该像任何其他http网址一样受支持，但是从规范CORS + http auth不支持

Answer 3

我正在寻找解决同样问题的方法。这篇文章here说明了这一点：

另一个警告是，据我们所知，您无法更改HTTP 使用EventSource时的标题，这意味着你必须提交一个授权查询字符串参数，其中包含您将拥有的值使用HTTP Basic Auth插入：你的base64编码串联登录和令牌。

以下是帖子中的代码：

// First, we create the event source object, using the right URL.
var url = "https://stream.superfeedr.com/?";
url += "&hub.mode=retrieve";
url += "&hub.topic=http%3A%2F%2Fpush-pub.appspot.com%2Ffeed";
url += "&authorization=anVsaWVuOjJkNTVjNDhjMDY5MmIzZWFkMjA4NDFiMGViZDVlYzM5";

var source = new EventSource(url);

// When the socket has been open, let's cleanup the UI.
source.onopen = function () {
  var node = document.getElementById('sse-feed');
  while (node.hasChildNodes()) {
    node.removeChild(node.lastChild);
  }
};

// Superfeedr will trigger 'notification' events, which corresponds
// exactly to the data sent to your subscription endpoint 
// (webhook or XMPP JID), with a JSON payload by default.
source.addEventListener("notification", function(e) {
  var notification = JSON.parse(e.data);
  notification.items.sort(function(x, y) {
    return x.published - y.published;
  });
  notification.items.forEach(function(i) {
    var node = document.getElementById('sse-feed');
    var item = document.createElement("li");
    var t = document.createTextNode([new Date(i.published * 1000), i.title, i.content].join(' '));
    item.appendChild(t);
    node.insertBefore(item, node.firstChild);
    // We add the element to the UI.
  });
});

Answer 4

如今，有一个NPM软件包可以更改HTTP标头

https://www.npmjs.com/package/eventsource

此库是EventSource的纯JavaScript实现客户。该API旨在与W3C兼容。

您可以将其与Node.js一起使用，或用作以下浏览器的浏览器polyfill 没有本地EventSource支持。

Answer 5

您可以使用 event-source-polyfill 添加这样的标题

import { EventSourcePolyfill } from 'event-source-polyfill';

new EventSourcePolyfill(`/api/liveUpdate`, {
  headers: {
    Authorization: `Bearer 12345`,
    'x-csrf-token': `xxx-xxx-xxx`,
  },
});

EventSource和基本的http身份验证

5 个答案: