jQuery 跨域 POST 恶作剧

Posted 2023-02-27

【中文标题】jQuery 跨域 POST 恶作剧

【英文标题】：jQuery cross domain POST shenanigans

【发布时间】：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？

【参考方案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/