Question

我不知道怎么弄清楚，情况如下：

我正在调用不在同一台机器上的Web服务上的方法，并在我的脚本中使用以下JS代码段：

$.ajax({
            type: "POST",
            url: "http://" + gServer + "/xawebservice/xawebservice.asmx/" + webMethod,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            cache: false,
            async: false,
            data: WSParameters,
            success: function callFunction(result) { processResults(result, pType, pParam1); },
            error: function (xhr, status, error) {
                alert(error.toString());
                //alert(xhr.toString());                    
        }
        });

参数很好并经过测试，网络方法也正确。

作为错误消息，我得到了这个：

Firefox：[例外...“失败”nsresult：“0x80004005（NS_ERROR_FAILURE）”位置：“JS frame :: http：// localhost：7515 / jquery-1.8.3.js ::：：第8434行“数据：否]
Chrome：错误：NETWORK_ERR：XMLHttpRequest异常101
IE8：无运输

如果我在同一台计算机上运行的Web服务上使用相同的代码段，则没有问题。如果我通过Web界面使用远程Web服务，它也可以正常工作。

PS：我搜索了一下，有些网页推荐了一些跨域参数，这些参数也无效。不幸的是，我想使用相对路径是行不通的。

感谢您提前做出的任何努力。

溴 vm370

更新：好吧我更新了我的代码，根据我现有的代码执行CORS请求，但是我收到错误500，直接在服务器上执行请求工作正常，并且在服务器上激活了CORS。

function xenappRequest(pType, pParam1) {

// CORS request    
var url = "http://" + gServer + "/webservice/webservice.asmx/webMethod";
var params = { "appName": pParam1 };
var xhr = createCORSRequest("POST", url);
if (!xhr) {
    alert('CORS not supported');
} else {
    // Do the request
    // Response handlers.
    xhr.onload = function () {
        //var text = xhr.responseText;
        alert('Response from CORS request to ' + url + ': ' + xhr.response);
    };
    xhr.onerror = function () {
        alert('Woops, there was an error making the request.');
    };
    xhr.send(JSON.stringify(params));
}

}

function createCORSRequest(method, url) {
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {
    // Check if the XMLHttpRequest object has a "withCredentials" property.
    // "withCredentials" only exists on XMLHTTPRequest2 objects.
    xhr.open(method, url, true);
} else if (typeof XDomainRequest != "undefined") {
    // Otherwise, check if XDomainRequest.
    // XDomainRequest only exists in IE, and is IE's way of making CORS requests.
    xhr = new XDomainRequest();
    xhr.open(method, url);
} else {
    // Otherwise, CORS is not supported by the browser.
    xhr = null;
}
return xhr;

}

从FF我得到错误500，在IE8中请求登陆xhr.onerror子句... 有什么想法吗？

Answer 1

Same Origin Policy在这里发挥作用。您无法与其他域通信。这是为了保护您的隐私，因此某些网页无法与您的电子邮件，银行帐户等进行通信。

如果其他域支持CORS，只要浏览器支持请求，您就可以进行该类型的请求。如果不支持CORS，则必须使用本地代理或JSONP请求[服务器也必须支持JSONP。]

Answer 2

我的头发拉了过来，这对我有用..

// js/jquery /////////

// post method call 
function  myajaxcall_post(){     
    $.ajax({ 
            url: 'http://' + url_path_on_remote_server,
            cache: false,
            type : "POST",            
            data: {request_param1: 'something1', request_param2: 'something2' },
            dataType: 'json',
            success: function(response)
            {
                console.log(response); 
            }            
      });
}

// get method call
function  myajaxcall_get(){     
$.ajax({ 
        url: 'http://' + url_path_on_remote_server + '?callback=?',
        cache: false,            
        type : "GET",            
        data: {request_param1: 'something1', request_param2: 'something2'},
        dataType: 'json',
        success: function(response)
        {
            console.log(response);    
        }
  });
}

请注意get方法调用的url中的其他'？callback =？'查询字符串参数。

现在在服务器端脚本上有一些权限设置可用于远程ajax调用。我不确定这些设置有多安全。

get方法调用的响应准备有点不同。它需要包含在传递给服务器的回调函数名称中的json响应。 Jquery会自动在查询字符串'？callback = somethingfromjquery'中放置一个值。所以我们使用$ _GET ['callback']来获取该回调函数的名称。

<?php  
// server side php script ////////////////

// Allow from any origin
if (isset($_SERVER['HTTP_ORIGIN'])) {
    header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
}

// Access-Control headers are received during OPTIONS requests
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {

    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD'])){
        header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
    }         

    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS'])){
        header("Access-Control-Allow-Headers:        {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
    }
}

// Send some response //////////////
//print_r($_POST);
//print_r($_GET);

$response = array();
$response['message'] = 'Response from '.$_SERVER['HTTP_HOST'];

if(isset($_POST)){ 
    echo json_encode($response);
}
elseif(isset($_GET)){
   echo $_GET['callback'].'('.json_encode($response).')';
}    

?>

如果您需要从表单上传文件，则无法使用ajax get方法调用来执行此操作，因为表单序列化不包含文件。您可以使用FormData（）提供的ajax post方法调用。

// js/jquery - for forms with file uploading 

function myajaxcall_submitform(){

     // put your form id 
    fdata = new FormData( document.getElementById('form1') ); 

    // add additional fields to form if any to post with
    fdata.append('upload_file_flag', 1);    

    $.ajax({ 
        url: 'http://' + url_path_on_remote_server,
        cache: false,
        type: "POST",            
        data: fdata,
        processData: false, // need this for FormData 
        contentType: false, // need this for FormData 
        dataType: 'json',
        success: function(response)
        {
                console.log(response);  
        }             
     });    
  }

JQuery Ajax对远程Web服务的POST请求

2 个答案: