jQuery 跨域 POST 恶作剧答案

【问题标题】：jQuery cross domain POST shenanigansjQuery 跨域 POST 恶作剧
【发布时间】：2011-10-09 08:55:16
【问题描述】：

我正在尝试对 API 进行身份验证，该 API 仅允许您使用带有 JSON 作为表单数据的 POST 进行身份验证，格式为 {"username":"myusername","password":"mypassword"}。

我已经尝试了两天来使用 jQuery，但我遇到了问题，因为它是跨域的。我怎样才能做到这一点？

错误信息：

Request Method:OPTIONS
Status Code:405 METHOD NOT ALLOWED

到目前为止的代码：

var username = "myusername";
var password = "mypass"
var authurl = "https://myurl";

$.ajax
({
    type: "POST",
    url: authurl,
    dataType: 'json',
    contentType: "application/json; charset=utf-8",
    async: false,
    data: {'json':'{"username":"' + username + '", "password":"' + password + '"}'},
    success: function (result) {
        $('#json').html(result);
    }
})

总结一下：

API 仅接受 POST 进行身份验证
API 需要 json 作为表单数据，例如：{"username":"myusername","password":"mypassword"}
js从不同域运行，导致跨域错误

非常感谢您的帮助:)

【问题讨论】：

您是否有权访问服务器，或者它是某种您无法修改的预定义 API？

标签： javascript jquery json post cross-domain

【解决方案1】：

您应该遵循不同的模式。您的本地 JS 将向本地 URL 执行 ajax 发布，该 URL 将接受带有您的 json 数据的 POST 方法。

此时，您的服务器代码将使用适当的数据向远程服务器执行 HTTP POST，获取响应，并将其发送回调用 js。

【讨论】：

感谢 Matteo，我通过 mod 重写了一条通向不同服务器的路径来解决这个问题，这很有效:)
工作完美，与 YQL 和 JSONP 相比，此解决方案是最好的......由于您的服务器在您的控制之下，您可以轻松地将 Access-Control-Allow-Origin 添加到您的服务器。谢谢马特奥
@MatteoMosca 我不确定这篇文章是否已死，但我非常感谢您对您的回答做出更多解释。如何让我的服务器向远程服务器发送 HTTP POST？
这取决于您使用的服务器端技术。例如，在 .Net C# 中，您可以使用 WebRequest 或 WebClient 类。您可以找到大量关于此的文档，只需 google 即可。

【解决方案2】：

问题是您尝试发布到的域不响应在每个跨域请求之前发送的 OPTIONS 请求。通过 OPTIONS 请求，浏览器接收有关跨域规则等的信息。要启用跨域请求，服务器必须设置 Access-Control-Allow-Origin:*（实际上是脚本的域，但 * 涵盖了所有内容）并且可能是 Access-Control-Allow-Methods: GET, POST, OPTIONS标题。

【讨论】：

【解决方案3】：

我在 GoDaddy 上有一个共享主机。我也需要这个问题的答案，经过四处搜索后，我发现这是可能的。

我编写了一个 .htaccess 文件，将它放在与我的操作页面相同的文件夹中。以下是 .htaccess 文件的内容：

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

这是我的 ajax 调用：

    $.ajax({
        url: 'http://www.mydomain.com/myactionpagefolder/gbactionpage.php',  //server script to process data
        type: 'POST',
        xhr: function() {  // custom xhr
            myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){ // check if upload property exists
                myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // for handling the progress of the upload
            }
            return myXhr;
        },
        //Ajax events
        beforeSend: beforeSendHandler,
        success: completeHandler,
        error: errorHandler,
        // Form data
        data: formData,
        //Options to tell JQuery not to process data or worry about content-type
        cache: false,
        contentType: false,
        processData: false
    });

参考这篇文章：

Header set Access-Control-Allow-Origin in .htaccess doesn't work

【讨论】：

如果该 jquery 请求是从某个应用程序（如 android 应用程序）发送的，并且 webview 执行该 jquery 会怎样。您在客户端（发送方）或服务器端（接收方）添加 .htaccess？
您将添加 .htaccess 服务器端

【解决方案4】：

对于跨域的东西使用JSONP（搜索crossDomain）

http://www.ibm.com/developerworks/library/wa-aj-jsonp1/

【讨论】：