jQuery 跨域 POST 恶作剧

Question

我正在尝试对 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 是从不同的地方运行的域，导致跨域错误

非常感谢您的帮助:)

Answer 1

你应该遵循不同的模式。您的本地 JS 将对本地 URL 执行 ajax post，该 URL 将接受包含 json 数据的 POST 方法。

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

Answer 2

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

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

请参阅这篇文章以供参考：

.htaccess 中的标头设置 Access-Control-Allow-Origin 不起作用

Answer 4

对于跨域内容，请使用 JSONP （搜索 crossDomain）

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