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

The specification仅定义了触发“错误”事件的几种可能情况，即：

已启动跨源请求，但未收到预期的CORS标头。这包括：
- Access-Control-Allow-Origin未设置或与原始网址不匹配。
- 您已设置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扩展程序文档中的match patterns）
或让服务器回复期望的CORS标头。在PHP中：
```
header("Access-Control-Allow-Origin: *");
```
这允许任何页面访问您的URL。要仅限制对扩展程序的访问，请使用：
```
header("Access-Control-Allow-Origin: chrome-extension://EXTENSION ID HERE");
```

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

1 个答案: