Using stomp.js over sock.js with ActiveMQ-Apollo does not seem to work

Question

I am working through some samples in the ActiveMQ-Apollo installation and playing around with the examples/websocket.

In this file, Stomp.js is being used to establish connection:

client = Stomp.client(url);

The example works fine and I am able to see the messages being sent and received. The issue, is that Stomp uses default WebSocket which may not be available at times. So, I wanted to integrate with SockJS client library. According to the example for StompJS on this page (http://jmesnil.net/stomp-websocket/doc/) it should be possible with this code:

<script src="http://cdn.sockjs.org/sockjs-0.3.min.js"></script>
<script>
  // use SockJS implementation instead of the browser's native implementation
  var ws = new SockJS(url);
  var client = Stomp.over(ws);
  [...]
</script>

The above code appears to execute correctly, however, later I see the following errors:

XMLHttpRequest cannot load ws://mylocaldomain.com:61623/info. Cross origin requests are only supported for HTTP. sockjs-0.3.js:807
Uncaught Error: NetworkError: DOM Exception 19 

Then, I see the debug window show this message:

Opening Web Socket...
Whoops! Lost connection to undefined

I am serving the page from mylocaldomain.com:80, and the ActiveMQ Apollo server is running on the same machine, but listening on port 61623. I have also grabbed the latest version of StompJS (from dist directory on github) as well as SockJS directly from cdn.sockjs.org.

I tried this example on latest Chrome and Firefox (on OSX) and the same thing occurs. No connection is established.

Again, going back to the standard example which ships with the Apollo works fine, but I would like to find out why StompJS over StockJS is failing.

Has anyone seen this issue?

Thanks. -AP_

Answer 1

You need to modify the ActiveMQ-Apollo web configuration to support Cross-Origin-Resource-Sharing (CORS) as described here:

Enabling CORS

W3C CORS Specification

Basically the server needs to do the following things:

• Support the HTTP OPTIONS request (aka CORS pre-flight request) that is sent by browsers for Cross Domain requests. This includes responding to the OPTIONS request with:
  • Access-Control-Allow-Origin header (for example: "*" which means allow all origins)
  • Access-Control-Request-Method header (for example: "GET, POST, PUT, DELETE, OPTIONS")
  • Access-Control-Allow-Headers (for example: "X-Requested-With,Origin,Content-Type, Accept")

The handling of HTTP OPTIONS can typically be done using a single Web Filter matching filter pattern "/*". See also "cors_origin" WebSocket connector URL query parameter supported by ActiveMQ Apollo 1.7