jQuery $.ajax()， $。邮件发送"选项"在Firefox中的REQUEST_METHOD

有什么问题，我认为是一个相对简单的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输出的图片:

.

346710 次浏览
小开

似乎如果o.url = 'index.php'和这个文件存在是ok的，并在控制台上返回成功消息。如果我使用url:http://www.google.com，它返回一个错误

如果做post请求，为什么不直接使用$ . post方法:

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

它简单多了。

小开

你能试一下吗

contentType:application/x-www-form-urlencoded

小开
最佳答案

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

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

尝试添加以下选项:

数据类型:“json”

小开

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

在请求JSONP调用时，不会生成SCRIPT元素，因为只有当AJAX调用的Type设置为GET时才会生成SCRIPT元素。

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

小开

Mozilla开发人员中心文章描述了各种跨域请求场景。这篇文章似乎表明，内容类型为“application/x-www-form-urlencoded”的POST请求应该作为“简单请求”发送(不包含“preflight”OPTIONS请求)。然而，我发现Firefox发送了OPTIONS请求，尽管我的POST是用那种内容类型发送的。

我能够通过在服务器上创建一个选项请求处理程序来实现这一点，将“Access-Control-Allow-Origin”响应头设置为“*”。你可以通过将它设置为特定的东西来限制它，比如'http://someurl.com'。此外，我还读到，您可以指定一个逗号分隔的多个起源列表，但我不能让它工作。

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

小开

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

唯一没有发送preflightrequest的contentType似乎只是文本/plain…而不是mozilla 在这里中提到的其他参数

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

供你参考:前面提到的Moz文件建议X-Lori报头应该触发preflightrequest…它不是。

小开

另一种绕过这个问题的方法是使用代理脚本。该方法用于例子

小开

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

小开

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

通常用于规范url ..

我挣扎了几个小时才偶然发现这篇文章，并发现了交叉领域的暗示。

小开

响应脚本顶部的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);
}
小开

解决方法是:

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

这在调用Facebook API和Firefox中起了作用。Firebug在上述条件下使用GET而不是OPTIONS。

小开

我已经使用完全基于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执行目标脚本时会发生什么。后面的部分要归功于友好的服务器故障人员。

小开

我有同样的问题发送请求谷歌地图，解决方案是相当简单的jQuery 1.5 -为dataType使用dataType: "jsonp"

小开

我们在ASP.Net上也遇到过类似的问题。当试图执行jQuery $.post来获取一些html内容时，我们的IIS返回一个内部服务器错误，因为PageHandlerFactory被限制只响应GET,HEAD,POST,DEBUG动词。所以你可以改变这个限制添加动词OPTIONS到列表中或者选择All Verbs

你可以在你的IIS管理器中修改它，选择你的网站，然后选择处理程序映射，双击你的PageHandlerFactory *。apx文件作为您需要的(我们使用集成应用程序池与框架4.0)。点击Request Restrictions，然后转到Verbs Tabn，应用你的修改。

现在我们的$.post请求正在正常工作:)

小开

我已经发布了一个明确的例子，如何解决这个问题，如果控制服务器代码的域名，你要张贴。这个答案在这篇文章中有所涉及，但在我看来，这篇文章更清楚地解释了这个问题。

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

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


}
});
}
小开

你需要在服务器端做一些工作。我看到你在服务器端使用PHP，但解决方案。net web应用程序在这里: 不能将content-type设置为'在jQuery.ajax < / p >

在PHP脚本中执行同样的操作，它将工作。简单地说:第一次请求浏览器询问服务器是否允许以这种类型发送这样的数据，第二次请求是适当的/允许的。

小开

尝试添加以下内容:

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

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

遵循这个URL: 使用Mode-Rewrite进行代理，我添加这一行到我的httpd.conf:

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

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

小开

请注意:

JSONP只支持GET请求方法。

*通过火狐发送请求

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

以上请求由选项(while ==>< em >类型:“POST”< / em >)!!!!发送

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

但以上请求由得到(while ==>< em >类型:“POST”< / em >)!!!!发送

当你在“跨域交流”时，注意并小心。

小开

罪魁祸首是使用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;
}
}
小开

我已经有这段代码处理好我的cors情况在php:

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结果。


提交答案