Điều gì khiến EventSource kích hoạt lỗi trong tiện ích Chrome của tôi?

Question

Tôi có đoạn code sau đây trong một BACKGROUND_SCRIPT trong một phần mở rộng của Google Chrome:

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); 

Vấn đề của tôi là như sau: 'lỗi' Bất cứ khi nào tôi tải các phần mở rộng, nó nói, nhưng làm thế nào để tìm hiểu chính xác những gì gây ra lỗi?

Answer 1

The specification xác định chỉ có một vài trường hợp có thể cho các "lỗi" sự kiện được kích hoạt, đó là:

• Một chéo gốc yêu cầu được khởi xướng, nhưng các tiêu đề CORS dự kiến ​​đã không nhận được. Điều này bao gồm:
  • Access-Control-Allow-Origin không được đặt hoặc không khớp với URL gốc.
  • Bạn đã đặt withCredentials:true (thông qua tham số thứ hai là EventSource), nhưng máy chủ không trả lời bằng Access-Control-Allow-Credentials: true.
• Đã xảy ra lỗi mạng.
• Trạng thái http không phải là 200, 305, 401, 407, 301, 302, 303 hoặc 307.
• Tác nhân người dùng (trình duyệt) đang cố gắng thiết lập lại kết nối.
• Trạng thái http là 200, nhưng tiêu đề Content-Type của phản hồi không phải là `văn bản/sự kiện-luồng.
• Đã xảy ra chuyển hướng, dẫn đến một trong những điều kiện trước đó.

Khi một lỗi CORS xảy ra, Chrome sẽ thường đăng nhập được thông báo sau ra cửa sổ Console:

EventSource không thể tải http://example.com/eventsource. Xuất xứ http://origin.example.com không được cho phép bởi Access-Control-Allow-Origin.

Vì một số lý do, Chrome không hiển thị lỗi này khi chuyển hướng đã diễn ra.

---

Có thể bạn đã thêm quyền "http://www.janywer.freetzi.com/*" vào tệp kê khai của mình, khiến yêu cầu ban đầu được chuyển. Trang này chuyển hướng đến một tên miền khác (không có tiền tố www). Có thể bạn chưa thêm miền này vào tệp kê khai của mình, vì vậy Chrome sẽ thử yêu cầu hỗ trợ CORS. Các tiêu đề dự kiến ​​không được nhận, vì vậy Chrome hủy yêu cầu.

Điều này có thể được giải quyết bằng hai cách:

• Thêm tất cả các lĩnh vực liên quan đến tập tin của bạn, ví dụ

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

  (thấy match patterns trong tài liệu mở rộng Chrome)

• hoặc để trả lời máy chủ với các tiêu đề CORS dự kiến.Trong PHP:

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

  Điều này cho phép bất kỳ trang nào truy cập URL của bạn. Để giới hạn quyền truy cập vào tiện ích của bạn chỉ, hãy sử dụng:

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