Question

遇到我认为是一个相对简单的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输出的图片：

Answer 1

错误的原因是相同的原始政策。它只允许您对自己的域执行XMLHTTPRequests。看看您是否可以使用JSONP回调：

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

Answer 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。

Answer 3

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

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

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

Answer 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。

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

Answer 6

向Google地图发送请求时遇到同样的问题，使用jQuery 1.5解决方案非常简单 - 使用数据类型dataType: "jsonp"

Answer 7

Culprit是使用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;
                }
    }

Answer 8

我正在查看源1.3.2，当使用JSONP时，请求是通过动态构建SCRIPT元素来实现的，该元素通过浏览器的同域策略。当然，您无法使用SCRIPT元素发出POST请求，浏览器将使用GET获取结果。

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

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

Answer 9

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

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

现在我们的$.post请求按预期正常工作：）

Answer 10

我似乎如果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");

它简单得多。

Answer 11

检查您的表单的action网址是否包含域的www部分，而您打开的原始网页是否会在没有www的情况下查看。

通常为Canonical Urls完成..

我挣扎了几个小时才绊倒了这篇文章，发现了Cross Domain的暗示。

Answer 12

解决方法是：

使用dataType：json
将&callback=?添加到您的网址

这适用于调用Facebook API和Firefox。在上述条件下（两者都是），Firebug使用GET代替OPTIONS。

Answer 13

解决问题的另一种可能性是使用代理脚本。针对example here

描述了该方法

Answer 14

如果控制要发布到的域的服务器代码，我已经发布了一个如何解决此问题的明确示例。在这个帖子中提到了这个答案，但这更清楚地解释了IMO。

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

Answer 15

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

请按照以下网址：Using Mode-Rewrite for proxying，我将此行添加到我的httpd.conf：

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

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

Answer 16

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

Answer 17

尝试添加以下内容：

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

Answer 18

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

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

Answer 19

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

     }
});         
}

Answer 20

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

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

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

仅供参考：上述Moz文档建议X-Lori标题应触发Preflighted请求......但事实并非如此。

Answer 21

尝试添加选项：

dataType：“json”

Answer 22

你可以在没有

的情况下试试这个

contentType:application/x-www-form-urlencoded

Answer 23

请注意：

JSONP仅支持GET请求方法。

* firefox发送请求：*

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

上述请求通过 OPTIONS 发送（而==＆gt; 类型：＆＃39; POST＆＃39; ）!!!!

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

但是上面的请求是通过 GET 发送的（而==＆gt; 类型：＆＃39; POST＆＃39; ）!!! ！

当你进入＆＃34;跨域通信＆＃34; ，注意并小心。

jQuery $ .ajax（），$。post在Firefox中将“OPTIONS”作为REQUEST_METHOD发送

23 个答案: