title: Cross origin SignalR connection stops after negotiate
body: <p>I have an MVC 5 app serving up views, and a Web API 2 app as the service layer (.NET 4.5). The Web API app uses SignalR 2.1.2 to return progress as it's processing POSTs to the service API. The two are deployed to different domains, so I've set up cross origin support as per the <a href="http://www.asp.net/signalr/overview/guide-to-the-api/hubs-api-guide-javascript-client#crossdomain">asp.net</a> tutorial article.</p>
  
  <pre class="lang-cs prettyprint-override"><code>[assembly: OwinStartup(typeof (Startup))]
  namespace MyApp.Service
  {
      public class Startup
      {
          public void Configuration(IAppBuilder app)
          {
              app.Map("/signalr", map =&gt;
              {
                  //worry about locking it down to specific origin later
                  map.UseCors(CorsOptions.AllowAll);
                  map.RunSignalR(new HubConfiguration());
              });
              //now start the WebAPI app
              GlobalConfiguration.Configure(WebApiConfig.Register);
          }
      }
  }
  </code></pre>
  
  <p>WebApiConfig.cs also contains its own CORS declaration.</p>
  
  <pre class="lang-cs prettyprint-override"><code>namespace MyApp.Service
  {
      public static class WebApiConfig
      {
          public static void Register(HttpConfiguration config)
          {
              //controller invocations will come from the MVC project which is deployed to a
              //different domain, so must enable cross origin resource sharing
              config.EnableCors();
              // Web API routes
              config.MapHttpAttributeRoutes();
  
              //Snip other controller dependency initialisation
          }
      }
  }
  </code></pre>
  
  <p>I've defined a simple hub class with no server-side API (it's only to allow the server to push to the clients, not for the clients to call into).</p>
  
  <pre class="lang-cs prettyprint-override"><code>namespace MyApp.Service.Hubs
  {
      [HubName("testresult")]
      public class TestResultHub : Hub
      {
      }
  }
  </code></pre>
  
  <p>Since I'm going cross-domain AND the hub is not exposing any server side API, I'm not bothering to use a generated JS proxy.</p>
  
  <p>The relevant bits of the JS that set up the signalr hub connection is: (remember this is being served up from the MVC app, which does not have any signalr support (except jquery-signalr-{version}.js of course))</p>
  
  <pre class="lang-js prettyprint-override"><code>function TestScenarioHandler(signalrHubUrl) {
      var self = this;
  //Snip irrelevant bits (mostly Knockout initialisation)
  
      self.signalrConnectionId = ko.observable();
  
      var hubConnection = $.hubConnection(signalrHubUrl, { useDefaultPath: false });
  
      var hubProxy = hubConnection.createHubProxy("testresult");
      hubProxy.on("progress", function(value) {
          console.log("Hooray! Got a new value from the server: " + value);
      });
  
      hubConnection.start()
          .done(function() {
              self.signalrConnectionId(hubConnection.id);
              console.log("Connected to signalr hub with connection id " + hubConnection.id);
          })
          .fail(function() {
              console.log("Failed to connect to signalr hub at " + hubConnection.url);
          });
  }
  </code></pre>
  
  <p>Going cross-origin like this, Firefox network traffic shows (and I've confirmed Chrome shows the same thing) a GET to</p>
  
  <p><code>http://****service.azurewebsites.net/signalr/negotiate?clientProtocol=1.5&amp;connectionData=[{"name":"testresult"}]&amp;_=1424419288550</code></p>
  
  <p>Notice that the <code>name</code> matches the value of the <code>HubName</code> attribute on my hub class.</p>
  
  <p>This GET returns HTTP 200, the response gives me a JSON payload containing a <code>ConnectionId</code>, <code>ConnectionToken</code>, and a bunch of other fields that suggests everything's ok. The HTTP response also has the <code>Access-Control-Allow-Origin:</code> header set to the domain that the GET originated from. All up it looks good, except that's where the traffic stops.</p>
  
  <p>But the JS console prints <code>"Failed to connect to signalr hub at http://****service.azurewebsites.net/signalr"</code></p>
  
  <p>To verify I'm not doing anything too stupid, I've added signalr support and a basic hub to the MVC app (so no cross origin required), and changed the <code>$.hubConnection()</code> and <code>hubConnection.createProxy()</code> calls accordingly. When I do that, browser traffic shows the same <code>/signalr/negotiate?...</code> GET (obviously not cross origin any more), but then also GETs to <code>/signalr/connect?...</code> and <code>/signalr/start?...</code>. The JS console also prints a success message.</p>
  
  <p>So in summary;</p>
  
  <ul>
  <li>CORS is enabled on the service layer, and the signalr <code>/negotiate</code> GET returns 200, what appears to be a valid connection id, and the expected <code>Access-Control-Allow-Origin:</code> header. This suggests to me that the server-side CORS support is behaving itself correctly, but the signalr connection does not succeed.</li>
  <li>When I reconfigure so the signalr connection is NOT cross origin, everything works as expected.</li>
  </ul>
  
  <p>WTF am I missing or doing wrong?! Some conflict between <code>HttpConfiguration.EnableCors()</code> and <code>IAppBuilder.UseCors(CorsOption)</code> perhaps?</p>