ajax - post跨域 - options请求500




jQuery $.ajax(),$.post在Firefox中发送“OPTIONS”作为REQUEST_METHOD (16)

遇到麻烦,我认为是一个相对简单的jQuery插件...

该插件应通过ajax从php脚本获取数据,以将选项添加到<select> 。 ajax请求非常通用:

$.ajax({
  url: o.url,
  type: 'post',
  contentType: "application/x-www-form-urlencoded",
  data: '{"method":"getStates", "program":"EXPLORE"}',
  success: function (data, status) {
    console.log("Success!!");
    console.log(data);
    console.log(status);
  },
  error: function (xhr, desc, err) {
    console.log(xhr);
    console.log("Desc: " + desc + "\nErr:" + err);
  }
});

这似乎在Safari中正常工作。 在Firefox 3.5中,服务器上的REQUEST_TYPE始终为'OPTIONS',并且$ _POST数据不会显示。 Apache将请求记录为类型'OPTIONS':

::1 - - [08/Jul/2009:11:43:27 -0500] "OPTIONS sitecodes.php HTTP/1.1" 200 46

为什么这个ajax调用在Safari中工作,但不是Firefox,我该如何修复它的Firefox?

Response Headers
Date: Wed, 08 Jul 2009 21:22:17 GMT
Server:Apache/2.0.59 (Unix) PHP/5.2.6 DAV/2
X-Powered-By: PHP/5.2.6
Content-Length  46
Keep-Alive  timeout=15, max=100
Connection  Keep-Alive
Content-Type    text/html

Request Headers
Host    orderform:8888
User-Agent  Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1) Gecko/20090624 Firefox/3.5
Accept  text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language en-us,en;q=0.5
Accept-Encoding gzip,deflate
Accept-Charset  ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive  300
Connection  keep-alive
Origin  http://ux.inetu.act.org
Access-Control-Request-Method   POST
Access-Control-Request-Headers  x-requested-with

这是Firebug输出的图片:


你可以尝试没有

contentType:application/x-www-form-urlencoded


你需要在服务器端做一些工作。 我看到你在服务器端使用PHP,但.NET Web应用程序的解决方案在这里: 无法在jQuery.ajax中将content-type设置为'application / json'

在PHP脚本中做同样的事情,它会起作用。 简单地说:首先请求浏览器询问服务器是否允许使用此类型发送此类数据,并且第二个请求是正确的/允许的。


对此的解决方案是:

  1. 使用dataType: json
  2. 添加&callback=? 到你的网址

这工作在调用Facebook API和Firefox。 Firebug使用GET而不是OPTIONS来满足上述条件(两者都是)。


尝试添加以下内容:

dataType: "json",
ContentType: "application/json",
data: JSON.stringify({"method":"getStates", "program":"EXPLORE"}),  

当我想将数据发布到托管在另一台服务器上的apache solr时,我使用代理url解决了类似的问题。 (这可能不是完美的答案,但它解决了我的问题。)

按照这个URL: 使用Mode-Rewrite进行代理 ,我将这一行添加到我的httpd.conf中:

 RewriteRule ^solr/(.*)$ http://ip:8983/solr$1 [P]

因此,我可以将数据发布到/ solr而不是将数据发布到http://ip:8983/solr/ *。 然后它将发布相同来源的数据。


我们在ASP.Net中遇到过这样的问题。 由于PageHandlerFactory被限制为只响应GET,HEAD,POST,DEBUG动词GET,HEAD,POST,DEBUG我们的IIS在返回内部服务器错误时尝试执行jQuery $.post来获取一些html内容。 因此,您可以更改该限制,将动词“OPTIONS”添加到列表中或选择“All Verbs”

您可以在IIS管理器中修改该选项,选择您的网站,然后选择处理程序映射,根据需要双击您的PageHandlerFactory中的* .apx文件(我们在框架4.0中使用集成的应用程序池)。 点击请求限制,然后转到动词Tabn并应用您的修改。

现在我们的$.post请求正在按预期工作:)


我在Django端使用了以下代码来解释OPTIONS请求并设置所需的Access-Control标题。 在此之后,我的Firefox的跨域请求开始工作。 如前所述,浏览器首先发送OPTIONS请求,然后立即发送POST / GET

def send_data(request):
    if request.method == "OPTIONS": 
        response = HttpResponse()
        response['Access-Control-Allow-Origin'] = '*'
        response['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS'
        response['Access-Control-Max-Age'] = 1000
        # note that '*' is not valid for Access-Control-Allow-Headers
        response['Access-Control-Allow-Headers'] = 'origin, x-csrftoken, content-type, accept'
        return response
    if request.method == "POST":
        # ... 

编辑:它似乎是,至少在某些情况下,您还需要添加相同的访问控制标头实际的响应。 这可能有点令人困惑,因为请求似乎成功了,但Firefox并未将响应的内容传递给Javascript。


我在通过源代码1.3.2查看时,使用JSONP时,请求是通过动态构建SCRIPT元素来完成的,该元素将通过浏览器的相同域策略。 当然,您不能使用SCRIPT元素发出POST请求,浏览器将使用GET获取结果。

在请求JSONP调用时,不会生成SCRIPT元素,因为它仅在AJAX调用类型设置为GET时才执行此操作。

http://dev.jquery.com/ticket/4690


我已经使用完全基于Apache的解决方案解决了此问题。 在我的虚拟主机/ htaccess我把以下块:

# enable cross domain access control
Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS"

# force apache to return 200 without executing my scripts
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule .* / [R=200,L]

您可能不需要后者,这取决于Apache执行目标脚本时发生的情况。 我们将在后面介绍友好的ServerFault伙伴



我有与发送请求到谷歌地图相同的问题,解决方案很简单,与jQuery 1.5 - dataType使用dataType: "jsonp"


mozilla开发者中心文章描述了各种跨域请求场景。 该文章似乎表明,应用程序发送的内容类型为'application / x-www-form-urlencoded'的POST请求应作为“简单请求”(不包含“预检”OPTIONS请求)发送。 不过,我发现Firefox发送了OPTIONS请求,即使我的POST是使用该内容类型发送的。

我能够通过在服务器上创建一个选项请求处理程序来完成这项工作,即将'Access-Control-Allow-Origin'响应标头设置为'*'。 通过将其设置为特定的内容,您可以更具限制性,如“ http://someurl.com ”。 此外,我读过,据推测,你可以指定多个来源的逗号分隔列表,但我无法让这个工作。

一旦Firefox收到对OPTIONS请求的响应并且具有可接受的“Access-Control-Allow-Origin”值,它就会发送POST请求。


绕过这个问题的另一种可能性是使用代理脚本。 例如在这里描述该方法


罪魁祸首是使用OPTIONS方法的预检请求

对于可能对用户数据产生副作用的HTTP请求方法(特别是对于GET以外的HTTP方法,或对于某些MIME类型的POST方法),该规范要求浏览器“预检”请求,请求来自服务器与HTTP OPTIONS请求方法,然后,在从服务器获得“批准”后,使用实际的HTTP请求方法发送实际请求。

Web规范参考: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORShttps://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

我通过在Nginx conf中添加以下行来解决了这个问题。

    location / {
               if ($request_method = OPTIONS ) {
                   add_header Access-Control-Allow-Origin  "*";
                   add_header Access-Control-Allow-Methods "POST, GET, PUT, UPDATE, DELETE, OPTIONS";
                   add_header Access-Control-Allow-Headers "Authorization";
                   add_header Access-Control-Allow-Credentials  "true";
                   add_header Content-Length 0;
                   add_header Content-Type text/plain;
                   return 200;
               }
    location ~ ^/(xxxx)$ {
                if ($request_method = OPTIONS) {
                    rewrite ^(.*)$ / last;
                }
    }

错误的原因是相同的原产地政策。 它只允许你为自己的域执行XMLHTTPRequests。 看看你是否可以使用JSONP回调:

$.getJSON( 'http://<url>/api.php?callback=?', function ( data ) { alert ( data ); } );

 function test_success(page,name,id,divname,str)
{ 
 var dropdownIndex = document.getElementById(name).selectedIndex;
 var dropdownValue = document.getElementById(name)[dropdownIndex].value;
 var params='&'+id+'='+dropdownValue+'&'+str;
 //makerequest_sp(url, params, divid1);

 $.ajax({
    url: page,
    type: "post",
    data: params,
    // callback handler that will be called on success
    success: function(response, textStatus, jqXHR){
        // log a message to the console
        document.getElementById(divname).innerHTML = response;

        var retname = 'n_district';
        var dropdownIndex = document.getElementById(retname).selectedIndex;
        var dropdownValue = document.getElementById(retname)[dropdownIndex].value;
        if(dropdownValue >0)
        {
            //alert(dropdownValue);
            document.getElementById('inputname').value = dropdownValue;
        }
        else
        {
            document.getElementById('inputname').value = "00";
        }
        return;
        url2=page2; 
        var params2 = parrams2+'&';
        makerequest_sp(url2, params2, divid2);

     }
});         
}






jquery