是什么原因导致EventSource在我的Chrome扩展程序中触发错误？

Question

我在Google Chrome扩展程序的background_script中有以下代码:

var source = new EventSource("http://www.janywer.freetzi.com/events/groupshout.php");
source.addEventListener('message', function (e) {
    console.log('message', e.data);
}, false);
source.addEventListener('open', function (e) {
    console.log('open');
}, false);
source.addEventListener('error', function (e) {
    console.log('error')
}, false);

我的问题如下:每当我加载扩展时,它都说"错误",但我如何找出究竟是什么触发了错误？

Answer 1

该规范仅定义了触发"错误"事件的几种可能情况,它们是:

• 发起了跨源请求,但未收到预期的CORS头.这包括:
  • Access-Control-Allow-Origin 未设置或与原始URL不匹配.
  • 你已设置withCredentials:true(通过第二个参数EventSource),但服务器没有回复Access-Control-Allow-Credentials: true.
• 发生网络错误.
• http状态不是200,305,401,407,301,302,303或307.
• 用户代理(浏览器)正在尝试重新建立连接.
• http状态为200,但Content-Type响应的标头不是`text/event-stream.
• 发生了重定向,导致一个先前的条件.

发生CORS错误时,Chrome通常会将以下消息记录到控制台:

EventSource无法加载http://example.com/eventsource.Access-Control-Allow-Origin不允许来源http://origin.example.com.

出于某种原因,Chrome在重定向发生时不会显示此错误.

您可能已将"http://www.janywer.freetzi.com/*"权限添加到清单文件,导致初始请求通过.此页面重定向到其他域(不带www前缀).您可能未将此域添加到清单文件中,因此Chrome会尝试启用CORS的请求.未收到预期的标头,因此Chrome会中止请求.

这可以通过两种方式解决:

• 将所有涉及的域添加到您的 文件中,例如

  "permissions": [
      "http://www.janywer.freetzi.com/*",
      "http://janywer.freetzi.com/*"
  ]
  

  (请参阅Chrome扩展程序文档中的匹配模式)

• 或者让服务器回复期望的CORS标头.在PHP中:

  header("Access-Control-Allow-Origin: *");
  

  这允许任何页面访问您的URL.要仅限制对扩展程序的访问,请使用:

  header("Access-Control-Allow-Origin: chrome-extension://EXTENSION ID HERE");