Javascript 原型 AJAX 请求作为 OPTIONS 而不是 GET 发送；导致 501 错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13814739/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prototype AJAX request being sent as OPTIONS rather than GET; results in 501 error
提问by Philip David
I'm attempting to access a web service with Prototype/AJAX and am running into an error I can't figure out: it seems that when I make a request to a server my request is interpreted as an OPTIONS rather than a GET request (and in turn throws a 501 - not implemented error since the server only allows GET requests, based on what I understand from Access-Control-Request-Method:). Am I missing something in my AJAX/request formulation that may be causing this error? I've read a bit into CORS/preflighted requests herebut I'm unsure how it could apply when my code looks compliant...
我正在尝试使用 Prototype/AJAX 访问 Web 服务，但遇到了一个我无法弄清楚的错误：似乎当我向服务器发出请求时，我的请求被解释为 OPTIONS 而不是 GET 请求（并反过来抛出一个 501 - 未实现的错误，因为服务器只允许 GET 请求，根据我的理解Access-Control-Request-Method:）。我是否在 AJAX/请求公式中遗漏了可能导致此错误的内容？我在这里阅读了一些 CORS/预检请求，但我不确定当我的代码看起来合规时它如何应用......
Here's the relevant AJAX request:
这是相关的 AJAX 请求：
function fetchMetar() {
var station_id = $("station_input").value;
new Ajax.Request(REQUEST_ADDRESS, {
method: "get",
parameters: {stationString: station_id},
onSuccess: displayMetar,
onFailure: function() {
$("errors").update("an error occurred");
}
});
}
and here's the error and relevant request info I get from Chrome:
这是我从 Chrome 获取的错误和相关请求信息：
Request URL:http://weather.aero/dataserver_current/httpparam?
dataSource=metars&requestType=retrieve&format=xml&hoursBeforeNow=3
&mostRecent=true&stationString=&stationString=KSBA
Request Method:OPTIONS
Status Code:501 Not Implemented
Request Headers
Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:origin, x-prototype-version, x-requested-with, accept
Access-Control-Request-Method:GET
Connection:keep-alive
Host:weather.aero
Origin:http://domain.com
Referer:http://domain.com/.../...html
What could I be overlooking here? Why does Chrome say the request is being sent as OPTIONS rather than GET? When Chrome spits out the Access-Control-Request-Headers:information, are these exclusively the only headers allowed in the request?
我可以在这里俯瞰什么？为什么 Chrome 说请求是作为 OPTIONS 而不是 GET 发送的？当 Chrome 吐出Access-Control-Request-Headers:信息时，这些是请求中唯一允许的标头吗？
Thanks!
谢谢！
回答by Katapofatico
Too many hours looking for a correct fix on prototypejs... finally, we have a non-intrusive solution on great kourge (Wilson Lee) article!. Here is an excerpt:
在prototypejs上寻找正确修复的时间太多了……最后，我们在很棒的kourge（Wilson Lee）文章上有一个非侵入性的解决方案！。这是摘录：
Most major Ajax frameworks like to set custom HTTP headers on the Ajax requests you instantiate; the most popular header is X-Requested-With: XMLHttpRequest. Consequently your request is promoted to a preflighted one and fails. The fix is to prevent your JavaScript framework from setting these custom headersif your request is a cross-domain one. jQuery already cleverly avoids unintentionally preflighting requests by not setting custom headers if your URL is considered to be remote. You'd have to manually prevent this if you're using other frameworks.
大多数主要的 Ajax 框架都喜欢在您实例化的 Ajax 请求上设置自定义 HTTP 标头；最流行的标头是 X-Requested-With: XMLHttpRequest。因此，您的请求被提升为预检请求并失败。如果您的请求是跨域请求，解决方法是防止您的 JavaScript 框架设置这些自定义标头。如果您的 URL 被认为是远程的，jQuery 已经通过不设置自定义标头来巧妙地避免了无意的预检请求。如果您使用其他框架，则必须手动防止这种情况。
It can be so simple as:
它可以如此简单：
new Ajax.Request('http://www.external-domain.net/my_api.php?getParameterKey=getParameterValue', {
method:'post',
contentType:"application/x-www-form-urlencoded",
postBody:'key=' + value,
onSuccess: function(response) {
// process response
},
onCreate: function(response) { // here comes the fix
var t = response.transport;
t.setRequestHeader = t.setRequestHeader.wrap(function(original, k, v) {
if (/^(accept|accept-language|content-language)$/i.test(k))
return original(k, v);
if (/^content-type$/i.test(k) &&
/^(application\/x-www-form-urlencoded|multipart\/form-data|text\/plain)(;.+)?$/i.test(v))
return original(k, v);
return;
});
}
});
If you see any disadvantage/improvement to this solution, we welcome you to share :)
如果您发现此解决方案有任何缺点/改进，我们欢迎您分享:)
回答by Victor
In fact it is preflight request, because Prototype adds custom headers X-Requested-With, X-Prototype-Versionto the request. Because of these headers browser sends first OPTIONSrequest. XHR specsays:
实际上它是preflight request，因为 Prototype向请求添加了自定义标头X-Requested-With, X-Prototype-Version。由于这些标头浏览器发送第一个OPTIONS请求。XHR 规范说：
For non same origin requests using the HTTP GET method a preflight request is made when headers other than Accept and Accept-Language are set.
对于使用 HTTP GET 方法的非同源请求，当设置了 Accept 和 Accept-Language 以外的标头时，会发出预检请求。
How to solve this problem? I can see only one possibility to solve this ASAP: completely overwrite method Ajax.Request#setRequestHeaders(), e.g. insert this script right after Prototype.js:
如何解决这个问题呢？我只能看到尽快解决此问题的一种可能性：完全覆盖方法Ajax.Request#setRequestHeaders()，例如在 Prototype.js 之后立即插入此脚本：
Ajax.Request.prototype.setRequestHeaders = function() {
var headers = {
// These two custom headers cause preflight request:
//'X-Requested-With': 'XMLHttpRequest',
//'X-Prototype-Version': Prototype.Version,
'Accept': 'text/javascript, text/html, application/xml, text/xml, */*'
};
if (this.method == 'post') {
headers['Content-Type'] = this.options.contentType +
(this.options.encoding ? '; charset=' + this.options.encoding : '');
/* Force "Connection: close" for older Mozilla browsers to work
* around a bug where XMLHttpRequest sends an incorrect
* Content-length header. See Mozilla Bugzilla #246651.
*/
if (this.transport.overrideMimeType &&
(navigator.userAgent.match(/Gecko\/(\d{4})/) || [0,2005])[1] < 2005)
headers['Connection'] = 'close';
}
if (typeof this.options.requestHeaders == 'object') {
var extras = this.options.requestHeaders;
if (Object.isFunction(extras.push))
for (var i = 0, length = extras.length; i < length; i += 2)
headers[extras[i]] = extras[i+1];
else
$H(extras).each(function(pair) { headers[pair.key] = pair.value; });
}
for (var name in headers)
this.transport.setRequestHeader(name, headers[name]);
}
This patch removes custom headers from any AJAX request. In case when you still need these headers for non-CORS requests, more logic may be added which will give possibility to disable these headers in options for new Ajax.Request()(I'll skip this variant here to make answer shorter).
此补丁从任何 AJAX 请求中删除自定义标头。如果您仍然需要非 CORS 请求的这些标头，则可能会添加更多逻辑，这将提供在选项中禁用这些标头的可能性new Ajax.Request()（我将在此处跳过此变体以缩短答案）。
回答by rumpel
Actually, it's much easier with Prototype.js V1.7:
实际上，使用 Prototype.js V1.7 更容易：
Ajax.Responders.register({
onCreate:function(r){
r.options.requestHeaders={
'X-Prototype-Version':null,
'X-Requested-With':null
};
}
});
Prototype.js drops any pre-defined header if its value is null.
如果其值为 null，Prototype.js 会删除任何预定义的标头。
回答by Adam
I've never used Prototype and i'm not sure how much use i'll be. But I had a quick look at the docs and I didn't see any support for method and parameters.
我从来没有用过 Prototype，我不确定我会用多少。但是我快速浏览了文档，并没有看到对方法和参数的任何支持。
So try:
所以尝试：
new Ajax.Request(REQUEST_ADDRESS+"?stationString="+station_id, {
onSuccess: displayMetar,
onFailure: function() {
$("errors").update("an error occurred");
}
});
Also I just noticed that stationString in your example should be in quotes assuming it isn't a variable.
另外我刚刚注意到您的示例中的 stationString 应该用引号引起来，假设它不是变量。
