javascript - 原型(prototype) AJAX 请求作为 OPTIONS 而不是 GET 发送；导致 501 错误

Question

我正在尝试使用 Prototype/AJAX 访问 Web 服务，但遇到了一个我无法弄清楚的错误:似乎当我向服务器发出请求时，我的请求被解释为 OPTIONS 而不是GET 请求(然后抛出 501 - not implemented 错误，因为服务器只允许 GET 请求，根据我从 Access-Control-Request-Method: 中的理解)。我是否遗漏了可能导致此错误的 AJAX/请求公式？我已经阅读了一些 CORS/预检请求 here但我不确定当我的代码看起来合规时它如何应用......

这是相关的 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");
        }
    });
}

这是我从 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 说请求是作为 OPTIONS 而不是 GET 发送的？当 Chrome 吐出 Access-Control-Request-Headers: 信息时，这些是否是请求中唯一允许的 header ？

谢谢!

Answer 1

花了太多时间寻找 prototypejs 的正确修复...最后，我们在 great kourge (Wilson Lee) article 上有了一个非侵入式解决方案!。以下是摘录:

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

如果您发现此解决方案有任何缺点/改进，我们欢迎您分享:)