原型AJAX请求被发送的选项，而不是GET;导致501错误 [英] Prototype AJAX request being sent as OPTIONS rather than GET; results in 501 error

问题描述

我试图访​​问与原型/ AJAX的Web服务和正在运行到一个错误我想不通：看来，当我提出一个请求到服务器我的要求是PTED作为一个跨$ P $选项​​而不是GET请求（反过来抛出501 - 未执行的错误，因为服务器只允许GET请求，根据我从访问控制请求，方法的理解：）。我缺少的东西，可能会导致这个错误我的AJAX /要求制定？我读了一下到CORS / preflighted请求这里< /一>，但我不确定，我的code相兼容它如何能申请...

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 here but I'm unsure how it could apply when my code looks compliant...

下面是相关的AJAX请求：

Here's the relevant AJAX request:

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

和这里是我从Chrome浏览器出现错误和有关要求的信息：

and here's the error and relevant request info I get from 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

我能尽览这里？为什么说铬的请求被发送的选项，而不是得到什么呢？当Chrome浏览器吐出访问控制请求报头：<？/ code>的信息，这些都是专门在请求唯一允许使用的标题

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?

谢谢！

推荐答案

太多时间找上prototypejs一个正确的修复。最后，我们对的大kourge（威尔逊饰）文章！下面是摘录：

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:

最重要的Ajax框架要设置自定义HTTP标头的Ajax请求你实例;最流行的标题为X-要求，通过：XMLHtt prequest。因此你的请求被晋升为preflighted之一，失败。 的解决办法是prevent从这些设定自定义标题如果您的请求是一个跨域您的一个JavaScript框架。 jQuery的已经巧妙地避免了无意preflighting请求通过不设置自定义头文件，如果您的网址被认为是远程的。你不得不手动prevent这个，如果你正在使用其他的框架。

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 headers if 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.

这可以如此简单：

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

这篇关于原型AJAX请求被发送的选项，而不是GET;导致501错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！