CORS SSE - 캐치 오류 : SECURITY_ERR : DOM 예외 18

Question

Goliath 및 SSE를 사용하여 실시간으로 최신 트윗, 뉴스 등의 업데이트를 보내는 스트리밍 서버를 개발 중입니다. 이 서버는 다른 도메인에 매핑됩니다.

index.html을

<script> 
    if(typeof(EventSource)!=="undefined") { 
     var source = new EventSource('http://192.168.0.44:9000/api/stream/articles?channel=Headlines'); 

     // new connection opened callback 
     source.addEventListener('open', function(e) { 
      console.log('connection opened'); 
     }, false); 

     // new connection opened callback 
     source.addEventListener('message', function(e) { 
      console.log(e.data); 
      msg = JSON.parse(e.data); 
      $('#result').append('<br/>').append(msg); 
     }, false); 

     // connection closed callback 
     source.addEventListener('error', function(e) { 
      if (e.eventPhase == EventSource.CLOSED) { 
      console.log('connection closed'); 
      } 
     }, false); 
    } else { 
     $('#result').append('<br/>').append("Whoops! Your browser doesn't receive server-sent events.") ; 
    } 
    </script> 

골리앗 구성 요소

#!/usr/bin/env ruby 
require 'rubygems' 
require 'goliath' 

class RedisPubsub < Goliath::API 
    use(Rack::Static, :root => Goliath::Application.app_path("public"), :urls => ["/index.html", "/twitter.html", "/favicon.ico", '/stylesheets/', '/javascripts/', '/images/']) 
    use Goliath::Rack::Params 
    use Goliath::Rack::Render, 'json' 

    def response(env) 
    ... 
    .... 
    env.stream_send("data:#{message}\n\n") 
    streaming_response(200, {'Content-Type' => 'text/event-stream', 'Access-Control-Allow-Origin' => '*'}) 
    end 
end 

골리앗 스트리밍 서버가 로컬 컴퓨터의 9000 포트에서 실행됩니다. http://localhost/index.html을 통해 페이지에 액세스하려고하면 CORS의 'Access-Control-Allow-Origin'헤더를 응답으로 보냈지 만 Chrome에서 언급 한 오류가 발생합니다. 제발 FF에 잘 작동하지 않습니다.

어떻게 해결할 수 있습니까?

Answer 1

http://www.html5rocks.com/en/tutorials/eventsource/basics/과 같이 Content-type 헤더를 text/event-stream으로 설정해야합니다.