jQuery $ .ajax(),$。post在Firefox中以REQUEST_METHOD的形式发送“ OPTIONS”

2020/10/31 13:52 · jquery ·  · 0评论

我以为是一个相对简单的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中对其进行修复?

响应标题
日期:2009年7月8日星期三21:22:17 GMT
伺服器:Apache / 2.0.59(Unix)PHP / 5.2.6 DAV / 2
X-Powered-By:PHP / 5.2.6
内容长度46
保持活动超时= 15,最大= 100
连接保持活动
内容类型text / html

请求标题
主机订单:8888
用户代理Mozilla / 5.0(Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1)Gecko / 20090624 Firefox / 3.5
接受text / html,application / xhtml + xml,application / xml; q = 0.9,* / *; q = 0.8
接受语言en-us,en; q = 0.5
接受编码gzip,放气
接受字符集ISO-8859-1,utf-8; q = 0.7,*; q = 0.7
保持生命300
连接保持活动
来源http://ux.inetu.act.org
访问控制请求方法POST
x请求的访问控制请求标头

这是Firebug输出的图片:

错误的原因是相同的原始策略。它仅允许您对自己的域执行XMLHTTPRequests。查看您是否可以改用JSONP回调:

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

我在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":
        # ... 

编辑:似乎至少在某些情况下,您还需要向实际响应中添加相同的Access-Control标头。由于请求似乎成功,所以这可能会造成一些混乱,但是Firefox不会将响应的内容传递给Javascript。

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请求。

我已使用完全基于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民间后者的一部分。

响应脚本顶部的此PHP似乎可以运行。(使用Firefox 3.6.11。我尚未进行大量测试。)

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
header('Access-Control-Max-Age: 1000');
if(array_key_exists('HTTP_ACCESS_CONTROL_REQUEST_HEADERS', $_SERVER)) {
    header('Access-Control-Allow-Headers: '
           . $_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']);
} else {
    header('Access-Control-Allow-Headers: *');
}

if("OPTIONS" == $_SERVER['REQUEST_METHOD']) {
    exit(0);
}

我向Google地图发送请求时遇到了同样的问题,jQuery 1.5的解决方案非常简单-用于dataType dataType: "jsonp"

罪魁祸首是使用OPTIONS方法进行的飞行前请求

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

Web规范参考:https : //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;
                }
    }

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

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

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

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

您可以在IIS管理器中对其进行修改,选择您的网站,然后选择处理程序映射,根据需要双击PageHandlerFactory中的* .apx文件(我们将集成应用程序池与框架4.0结合使用)。单击“请求限制”,然后转到“动词标签”并应用您的修改。

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

检查您的表单的actionURL是否包含www一部分,而您打开的原始页面是否显示为www

通常针对Canonical Urls完成。

我费了好几个小时才弄明白这篇文章,并发现了Cross Domain的提示。

我似乎,如果o.url = 'index.php'并且此文件存在就可以,并在控制台中返回成功消息。如果我使用网址,则会返回错误:http://www.google.com

如果执行发布请求,为什么不直接使用$ .post方法:

$.post("test.php", { func: "getNameAndTime" },
    function(data){
        alert(data.name); // John
        console.log(data.time); //  2pm
    }, "json");

它是如此简单。

我已经发布了一个清晰的示例,说明了如何控制要发布到的域的服务器代码。这个线程中涉及到了这个答案,但这更清楚地解释了IMO。

如何通过JavaScript发送跨域POST请求?

解决方案是:

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

这可以调用Facebook API和Firefox。Firebug正在使用GET而不是OPTIONS同时满足上述条件(两者都使用)。

解决该问题的另一种可能性是使用代理脚本。例如,此处描述了该方法

你能没有这个尝试吗

contentType:application/x-www-form-urlencoded

尝试添加选项:

dataType:“ json”

 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);

     }
});         
}

我在尝试使用Facebook API时遇到了类似的问题。

没有发送预检请求的唯一contentType似乎只是text / plain ...而不是mozilla此处提到的其余参数

  • 为什么这是唯一的浏览器?
  • Facebook为什么不知道并接受飞行前请求?

仅供参考:前面提到的Moz文档建议X-Lori标头应触发“预检”请求,但不会。

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

在PHP脚本中执行相同操作,它将起作用。简单地说:在第一个请求中,浏览器正在询问服务器是否允许以这种类型发送此类数据,而第二个请求是正确/允许的。

尝试添加以下内容:

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 / *。然后它将发布相同来源的数据。

我已经用这段代码很好地处理了我在php中的cors情况:

header( 'Access-Control-Allow-Origin: '.CMSConfig::ALLOW_DOMAIN );
header( 'Access-Control-Allow-Headers: '.CMSConfig::ALLOW_DOMAIN );
header( 'Access-Control-Allow-Credentials: true' );

而且它在本地和远程都可以正常工作,但不能用于远程上传。

apache / php或我的代码发生了什么事,我没有费心去搜索它,当您请求OPTIONS时,它返回带有cors规则但具有302结果的标头。因此,我的浏览器无法识别这种情况。

根据@Mark McDonald的回答,我所做的只是将这段代码放在标题之后:

if( $_SERVER['REQUEST_METHOD'] === 'OPTIONS' )
{
    header("HTTP/1.1 202 Accepted");
    exit;
}

现在,当请求时OPTIONS,它将仅发送标头和202结果。

请注意:

JSONP仅支持GET请求方法。

*通过Firefox发送请求:*

$.ajax({
   type: 'POST',//<<===
   contentType: 'application/json',
   url: url,
   dataType: "json"//<<=============
    ...
});

以上请求由OPTIONS发送(而==>类型:'POST')!!!

$.ajax({
    type: 'POST',//<<===
    contentType: 'application/json',
    url: url,
    dataType: "jsonp"//<<==============
    ...
});

但是以上请求是通过GET发送的(而==>类型:'POST')!!!

在“跨域通信”时,请注意并当心。

本文地址:http://jquery.askforanswer.com/jquery-ajaxpostzaifirefoxzhongyirequest_methoddexingshifasong-options.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!