jQuery跨域POST shenanigans

时间:2011-07-20 12:36:49

标签: javascript jquery json post cross-domain

我正在尝试对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是从其他域运行的,导致跨域错误

非常感谢您的帮助:)

4 个答案:

答案 0 :(得分:15)

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

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

答案 1 :(得分:4)

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

答案 2 :(得分:2)

我在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

答案 3 :(得分:-5)

对于跨域名,请使用JSONP(搜索crossDomain)

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