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

问题描述

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

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

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 (Wilson Lee) 文章！.摘录如下:

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 框架都喜欢在您实例化的 Ajax 请求上设置自定义 HTTP 标头；最流行的标头是 X-Requested-With: XMLHttpRequest.因此，您的请求被提升为预检请求并失败.解决方法是防止您的 JavaScript 框架设置这些自定义标头，如果您的请求是跨域的.如果您的 URL 被认为是远程的，jQuery 已经通过不设置自定义标头巧妙地避免了无意的预检请求.如果您使用其他框架，则必须手动防止这种情况.

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 请求作为 OPTIONS 而不是 GET 发送；导致 501 错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！