javascript - jquery.form 和跨域请求

Question

我很难尝试制作 jquery.form带有跨域请求。我在使用 Firefox 和 Chrome 时遇到问题(甚至还没有尝试过 IE)。

说明:我的整个网站位于http://www.mysite.com内.但是，我的联系表在另一台服务器上，由 http://contact.mysite.com 引用.我认为将其放在子域中可以回避有关跨域请求的问题，但显然没有。 http://contact.mysite.com在 Sinatra 中实现.

我的 javascript 设置没什么特别的。表单的操作指向 http://contact.mysite.com方法是 POST:

<form id="contact" action="http://contact.mysite.com/" method="post">

jquery.form 配置了一个 ajaxForm调用:

$(document).ready(function() {

  $('#contact').ajaxForm({
    success: function() { $('#success').fadeIn("slow"); },
    error: function() {  $('#error').fadeIn("slow"); }
  });

});

我遇到的第一个问题是 Firefox 3.5 - 显然它发送了一个 OPTIONS 请求，期望从服务器得到一个特定的答案。我用了this question配置我的 Sinatra 应用程序，使其达到预期的效果(似乎较新版本的 sinatra 包含一个选项动词):

require 'rubygems'
require 'sinatra'
require 'pony'

# patch sinatra so it handles options requests - see https://stackoverflow.com/questions/4351904/sinatra-options-http-verb
configure do
  class << Sinatra::Base
    def options(path, opts={}, &block)
      route 'OPTIONS', path, opts, &block
    end
  end
  Sinatra::Delegator.delegate :options
end

# respond to options requests so that firefox can do cross-domain ajax requests
options '/' do
  response['Access-Control-Allow-Origin'] = '*'
  response['Access-Control-Allow-Methods'] = 'POST'
  response['Access-Control-Max-Age'] = '2592000'
end

post '/' do
  # use Pony to send an email
  Pony.mail(...)
end

使用 jquery 1.4.3，我在 firebug 上看到一个 OPTIONS 请求，然后是一个 POST 请求(状态 200。电子邮件已发送)。使用 jquery 1.3.2 或 1.5，仅显示 OPTIONS 请求(未发送电子邮件)。

尽管如此，我尝试过的所有版本的 jquery 都会触发 error 回调。我追溯到 $.ajax(...) 调用，所以我不确定这个问题是来自 jquery.form 还是 jquery 本身。

我尝试注销来自错误的信息:

$('#contact').ajaxForm({
  success: function() { $('#success').fadeIn("slow"); },
  error: function(jqXHR, textStatus, errorThrown) {
    console.log(jqXHR.status);
    console.log(jqXHR.statusText);
  }
}); 

jquery 1.4.3 的输出(发送 OPTIONS 和 POST 请求后，状态均为 200):

0
(empty string)

jquery 1.5 上的输出(OPTIONS 返回 200 状态后；POST 永远不会发送)

302
error

我真的迷路了。

• 是否有处理此问题的插件？
• 我是不是遗漏了什么地方？

任何帮助将不胜感激。

Answer 1

AJAX 请求不能跨域执行(UPD: 不再正确，所有现代浏览器都支持 CORS )，但您可以改用 JSONP。尽管 JSONP 可以跨域工作，但它不能用于 POST 请求，您需要将表单的方法更改为 get 并使用它:

$('#contact').ajaxForm({
  success: function() { $('#success').fadeIn("slow"); },
  error: function() {  $('#error').fadeIn("slow"); },
  dataType: 'jsonp'
});

上述解决方案依赖于您的服务器响应有效的 jsonp 响应，否则 success 处理程序将不会被执行。例如:response.write(request.callback + '(' + result.to_json + ')')

---

最新版本的 jQuery 可以在没有 ajaxForm 插件的情况下序列化表单。如果你不需要文件上传，你可以使用这个:

$('form').submit(function() {
  var url = $(this).attr('action')
  var params = $(this).serialize()
  $.getJSON(url + '?' + params + "&callback=?", function(data) {
    // success
  })
  return false
});