javascript - 使用ShareJS的Access-Control-Allow-Origin

我的网站位于一个域/服务器上：www.mysite.com，而我在另一台服务器上运行ShareJS：www.my-other-server.com:8000。

www.mysite.com/index.html

<script src="http://www.my-other-server.com:8000/bcsocket.js"></script>
<script src="http://www.my-other-server.com:8000/share.js"></script>
<script src="http://www.my-other-server.com:8000/textarea.js"></script>

...

<textarea id='sharetext' ></textarea>

<script>
    // get the textarea element
    var elem = document.getElementById("sharetext");

    // connect to the server
    var options = {
        origin: "www.my-other-server.com:8000",
        browserChannel:{cors:"*"}
    }

    var connection = sharejs.open('test', 'text', options, function(error, doc) {
      doc.attach_textarea(elem);
  });

</script>

我在JS控制台中收到以下错误：

XMLHttpRequest cannot load http://www.my-other-server.com:8000/test?VER=8&MODE=init&zx=v44znr3caqea&t=1. Origin http://www.mysite.com is not allowed by Access-Control-Allow-Origin.

正如我上面所做的那样，此ShareJS GitHub问题（https://github.com/share/ShareJS/issues/77）建议将browserChannel:{cors:"*"}添加到share选项，但似乎没有任何作用...

我在这里做什么？重要的是，我的sharejs流量必须位于与静态/动态Web服务器不同的单独服务器上。

最佳答案

在node.js的服务器端，如果您使用express.js，则需要添加额外的标头，这将允许来自服务器端的跨域流量：

app.configure(function() {
  app.use(function(req, res, next) {
    res.header('Access-Control-Allow-Credentials', true);
    res.header('Access-Control-Allow-Origin', req.headers.origin);
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept');
    next();
  });
  app.set('jsonp callback', true);
});

在客户端，您仍然可能会遇到安全性问题，因此使用JSONP甚至更好，因此可以从服务器端这样进行响应：

res.jsonp({ hello: 'world' });

在客户端AJAX上像这样：

$.ajax({
  url: "www.my-other-server.com:8000",
  type: 'GET',
  dataType: 'jsonp',
  success: function(data) {
    console.log(data)
  },
  error: function(xhr, status, error) {
    console.log('error[' + status + '] jsonp');
  }
});