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

Posted 2023-02-16

【中文标题】jQuery $.ajax(), $.post 在 Firefox 中将“OPTIONS”作为 REQUEST_METHOD 发送

【英文标题】：jQuery $.ajax(), $.post sending "OPTIONS" as REQUEST_METHOD in Firefox

【发布时间】：2010-11-09 03:28:42

【问题描述】：

我认为是一个相对简单的 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 将请求记录为“选项”类型：

::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 服务器：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 Accept-Language en-us,en;q=0.5 接受编码 gzip,deflate 接受字符集 ISO-8859-1,utf-8;q=0.7,*;q=0.7 保活300 连接保持活动 来源 http://ux.inetu.act.org 访问控制请求方法 POST Access-Control-Request-Headers x-requested-with

这是 Firebug 输出的图片：

【问题讨论】：

您能发布萤火虫响应和请求标头吗？当我在 Firefox 中运行类似的代码时，我没有收到任何错误。

添加了标题信息，以及来自 Firebug 的图片。

在实现嵌入式网络服务器时遇到了同样的问题。谢谢你的提问:)

如果您正在寻找 Java JAX-RS 解决方案，请参阅此处：Access-Control-Allow-Origin

现在firefox的行为好像变了？我没有收到任何选项请求。

【参考方案1】：

错误的原因是同源策略。它只允许您对自己的域执行 XMLHTTPRequests。看看你是否可以改用JSONP 回调：

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

【讨论】：

为什么 firefox 是唯一能做到这一点的浏览器？我想要一个帖子而不是得到。

Crossite-POST: 有人知道使用 application/json 作为 Content-Type 的 POST 解决方案吗？

那么具体的解决方案是什么？

也在寻找解决方案并使用 getJSON 而不是 ajax 调用对我来说并不适用，因为它的局限性要大得多。

【参考方案2】：

我在 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。

【讨论】：

您对实际 POST/GET 响应的编辑有点吓人；如果有人可以确认，请在这里告诉我们！

我不知道是bug还是功能，但似乎其他人也注意到了它。参见例如kodemaniak.de/?p=62 并搜索“空响应正文”

简单请求和需要预检的请求是有区别的。您的“解决方案”仅适用于预检请求，因此它不是真正的解决方案。每当您在请求标头中获得“Origin:”-标头时，您应该回复允许。

我相信标题 Access-Control-Allow-Headers 应该包含值 x-csrf-token，而不是 x-csrftoken。

【参考方案3】：

这个mozilla developer center article描述了各种跨域请求场景。该文章似乎表明内容类型为“application/x-www-form-urlencoded”的 POST 请求应作为“简单请求”发送（没有“预检”选项请求）。然而，我发现 Firefox 发送了 OPTIONS 请求，即使我的 POST 是使用该内容类型发送的。

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

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

【讨论】：

注意：Access-Control-Allow-Origin 只能有一个值（您不能使用逗号分隔的列表），但是您可以编写（或使用）一个以编程方式更改它的插件允许不同的值。

【参考方案4】：

我已经使用完全基于 Apache 的解决方案解决了这个问题。在我的 vhost / 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 执行目标脚本时发生的情况。后面的部分归功于friendly ServerFault folk。

【讨论】：

你的回答对我有帮助，但如果需要 CORS 背后的一些逻辑，它并不能完全解决。

【参考方案5】：

响应脚本顶部的这个 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);

【讨论】：

这可能是个人喜好问题，但 总是 发送这些响应标头（也适用于 GET、POST、...）对于我的喜好。 （而且，我想知道是否总是发送符合规范的内容？）

将其包装在 if($_SERVER['HTTP_ORIGIN']) 中。如果该标头存在，则它是一个 CORS 请求，如果没有，则无需发送任何内容。

【参考方案6】：

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

【讨论】：

与 POST 方法不兼容。

它适用于 GET 方法，但它是一个非常有限的解决方案。例如，通过这样做，您无法发回带有特定标头（包括令牌）的响应。

【参考方案7】：

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

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

网页规范参考：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;
                
    

【讨论】：

这个答案非常有帮助，谢谢。浏览器使用 OPTIONS 方法发送预检请求这一事实并不明显。

【参考方案8】：

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

当您请求 JSONP 调用时，不会生成 SCRIPT 元素，因为它仅在 AJAX 调用类型设置为 GET 时才会生成。

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

【参考方案9】：

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

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

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

【参考方案10】：

检查您的表单的action URL 是否包含域的www 部分，而您打开的原始页面没有www。

通常为规范网址完成..

我挣扎了好几个小时才偶然发现这篇文章，发现了跨域的暗示。

【参考方案11】：

我似乎认为如果o.url = 'index.php' 并且该文件存在就可以并在控制台中返回成功消息。如果我使用 url:http://www.google.com

，它会返回错误

如果进行发布请求，为什么不直接使用$.post 方法：

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

简单多了。

【讨论】：

得到了同样的东西......我想我应该使用 $.ajax() 所以我至少可以得到一些关于错误情况的调试信息......

【参考方案12】：

如果控制您要发布到的域的服务器代码，我已经发布了一个明确的示例来说明如何解决这个问题。这个答案在这个线程中被触及，但这更清楚地解释了它IMO。

How do I send a cross-domain POST request via JavaScript?

【参考方案13】：

解决方法是：

使用数据类型：json 将&callback=? 添加到您的网址

这适用于调用 Facebook API 和 Firefox。 Firebug 使用 GET 而不是 OPTIONS 与上述条件（两者）。

【参考方案14】：

另一种规避问题的方法是使用代理脚本。该方法描述为example here

【参考方案15】：

你能不试试这个吗

contentType:application/x-www-form-urlencoded

【参考方案16】：

尝试添加选项：

数据类型：“json”

【讨论】：

那行得通，为什么 json 对于跨域请求被认为是“安全的”？

【参考方案17】：

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

     
);         

【讨论】：

该问题已在 6 个月前得到解答。这是如何解决的？

【参考方案18】：

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

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

为什么这是唯一的浏览器？ 为什么 Facebook 不知道并接受预检请求？

仅供参考：前面提到的 Moz 文档建议 X-Lori 标头应该触发预检请求……它不会。

【参考方案19】：

您需要在服务器端做一些工作。我看到您在服务器端使用 PHP，但 .NET Web 应用程序的解决方案在这里： Cannot set content-type to 'application/json' in jQuery.ajax

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

【参考方案20】：

尝试添加以下内容：

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

【参考方案21】：

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

跟随这个 URL：Using Mode-Rewrite for proxying，我将这一行添加到我的 httpd.conf：

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

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

【参考方案22】：

我已经有这段代码很好地处理了我在 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 结果。

【参考方案23】：

请注意：

JSONP 仅支持 GET 请求方法。

*通过firefox发送请求：*

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

OPTIONS发送上述请求（而 ==>type: 'POST'）！！！！

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

但上述请求由 GET 发送（而 ==>type: 'POST'）！！！！

当你在“跨域通信”时，注意并小心。