由于对 Heroku 上的 Rails 应用程序的 CORS 错误，无法进行跨域 ajax 发布

Question

我已经进行了各种搜索，但似乎无法弄清楚这一点。

我正在尝试创建一个小部件，您可以将其放在任何网站上以获取用户的反馈，该小部件会将反馈发布到我的应用程序 waterloo.herokuapp.com，用户可以登录查看他们的所有反馈。

我在我的 Rails 应用程序中使用 jquery ajax POST 方法，代码如下：

fb_form.submit(function(ev) {
  $.ajax({
    type: 'POST',
    url: 'http://waterloo.herokuapp.com/domains/2/comments',
    data: fb_form.serialize(),
    success: function(data) {
      console.log(data);
      alert('cool, this worked');
      $('.feedback-container').hide();
    },
    error: function(data) {
      console.log(data);
    }
  });

我收到以下错误：

XMLHttpRequest 无法加载 http://waterloo.herokuapp.com/domains/2/comments。请求的资源上不存在“Access-Control-Allow-Origin”标头。 Origin 'http://www.will-wallace.com' 因此不允许访问。

在我的 cmets_controller 中，我有一个 set_headers before_filter，它应该允许来自任何域的帖子（并且在本地工作）：

def set_headers
  headers['Access-Control-Allow-Origin'] = '*'
  headers['Access-Control-Expose-Headers'] = 'Etag'
  headers['Access-Control-Allow-Methods'] = 'POST'
  headers['Access-Control-Allow-Headers'] = '*, x-requested-with, Content-Type, If-   Modified-Since, If-None-Match'
  headers['Access-Control-Max-Age'] = '86400'
end

最奇怪的是，当我登录查看我试图发布的反馈时，它实际上成功了。尽管如此，正如我之前提到的，我收到了一个 ajax 错误响应。

我正在测试该小部件的域是 will-wallace.com，如果它有帮助的话，可以实际摆弄它。

最后，如果它有帮助的话，我似乎通过跟踪 heroku 日志得到了 500 错误：

2014-07-10T01:39:59.624512+00:00 heroku[router]: at=info method=POST path="/domains/2/comments" host=waterloo.herokuapp.com fwd="96.255.218.195" dyno=web.1 connect=5ms service=63ms status=500 bytes=1543

Answer 1

查看您的网站，当我使用小部件时，我在控制台中看到相同的错误消息：

XMLHttpRequest cannot load http://waterloo.herokuapp.com/domains/2/comments. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.will-wallace.com' is therefore not allowed access.

但如果你查看实际响应，它会从服务器收到 500 错误：

HTTP/1.1 500 Internal Server Error 
Content-Type: text/html; charset=utf-8
Date: Thu, 10 Jul 2014 02:40:45 GMT
Server: WEBrick/1.3.1 (Ruby/1.9.3/2014-05-14)
X-Request-Id: 66b02889-e2e9-4cac-b38f-3e5370982b55
X-Runtime: 0.052554
Content-Length: 1266
Connection: keep-alive

这有点误导。看起来您正确设置了标头，但由于您的服务器出现错误，它要么永远不会访问该代码，要么忽略错误的自定义标头。 如果您修复了 500 错误，您应该会看到您的 Access-Control 标头开始出现在响应中。

另一方面，WEBrick 并不是最适合生产的服务器，仅最适合开发模式。