Jquery – SharePoint GetListItems Across Domain

cross-domainjqueryjsonpsharepoint

I basically need to perform a GetListItems from a SharePoint list on a different server. I have tried different codes but they all error out. Can someone look at what I have and see if it's wrong or if it's just not possible? I get the Error alert then an xData.ResponseText alert as 'undefined'. Nothing after that. The server where I'm running the code is server3.intranet.com. Thank you.

var soapEnv =
    "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
        <soapenv:Body> \
             <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
                <listName>Shared Documents</listName> \
                <viewFields> \
                    <ViewFields> \
                        <FieldRef Name='Title' /> \
                   </ViewFields> \
                </viewFields> \
            </GetListItems> \
        </soapenv:Body> \
    </soapenv:Envelope>";

function Result(xData, status) {
    alert(xData.responseText);
    $(xData.responseXML).find("z\\:row").each(function() {
        var title = $(this).attr("ows_Title");
        alert(title);
    });
}

    $.ajax({
    url: "http://teams02.intranet.com/sites/MySite/_vti_bin/Lists.asmx",
    type: "POST",
    dataType: "JSONP",
    crossDomain: true,
    data: soapEnv,
    complete: Result,
        contentType: "text/xml; charset=\"utf-8\"",
 error:function(){
     alert("Error");
 }

So is there anything that needs to be changed in this code? And is the url that I'm using correct? I'm not sure exactly what I should be pointing this at–if it's the list itself or some sort of virtual path.

Best Answer

Here is a working example:

$(function(){
    var soapEnv = 
    "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
        <soapenv:Body> \
            <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
                <listName>Shared Documents</listName> \
                <viewFields> \
                    <ViewFields> \
                        <FieldRef Name='Title' /> \
                    </ViewFields> \
                </viewFields> \
            </GetListItems> \
        </soapenv:Body> \
     </soapenv:Envelope>";
    $.ajax({
        url: "http://servername/mysite/_vti_bin/lists.asmx",
        type: "POST",
        dataType: "xml",
        data: soapEnv,
        contentType: "text/xml; charset=\"utf-8\"",
        complete: function(xData, status){
            $(xData.responseXML).find("z\\:row").each(function(){
                var title = $(this).attr("ows_FileLeafRef").split("#")[1];
                alert(title);
            })
        },
        error: function(){
            alert("error");
        }
    });
});

Related Solutions

Javascript – How to send a cross-domain POST request via JavaScript

Update: Before continuing everyone should read and understand the html5rocks tutorial on CORS. It is easy to understand and very clear.

If you control the server being POSTed, simply leverage the "Cross-Origin Resource Sharing standard" by setting response headers on the server. This answer is discussed in other answers in this thread, but not very clearly in my opinion.

In short here is how you accomplish the cross domain POST from from.com/1.html to to.com/postHere.php (using PHP as an example). Note: you only need to set Access-Control-Allow-Origin for NON OPTIONS requests - this example always sets all headers for a smaller code snippet.

In postHere.php setup the following:

switch ($_SERVER['HTTP_ORIGIN']) {
    case 'http://from.com': case 'https://from.com':
    header('Access-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN']);
    header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
    header('Access-Control-Max-Age: 1000');
    header('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With');
    break;
}

This allows your script to make cross domain POST, GET and OPTIONS. This will become clear as you continue to read...

Setup your cross domain POST from JS (jQuery example):

$.ajax({
    type: 'POST',
    url: 'https://to.com/postHere.php',
    crossDomain: true,
    data: '{"some":"json"}',
    dataType: 'json',
    success: function(responseData, textStatus, jqXHR) {
        var value = responseData.someKey;
    },
    error: function (responseData, textStatus, errorThrown) {
        alert('POST failed.');
    }
});

When you do the POST in step 2, your browser will send a "OPTIONS" method to the server. This is a "sniff" by the browser to see if the server is cool with you POSTing to it. The server responds with an "Access-Control-Allow-Origin" telling the browser its OK to POST|GET|ORIGIN if request originated from "http://from.com" or "https://from.com". Since the server is OK with it, the browser will make a 2nd request (this time a POST). It is good practice to have your client set the content type it is sending - so you'll need to allow that as well.

MDN has a great write-up about HTTP access control, that goes into detail of how the entire flow works. According to their docs, it should "work in browsers that support cross-site XMLHttpRequest". This is a bit misleading however, as I THINK only modern browsers allow cross domain POST. I have only verified this works with safari,chrome,FF 3.6.

Keep in mind the following if you do this:

Your server will have to handle 2 requests per operation
You will have to think about the security implications. Be careful before doing something like 'Access-Control-Allow-Origin: *'
This wont work on mobile browsers. In my experience they do not allow cross domain POST at all. I've tested android, iPad, iPhone
There is a pretty big bug in FF < 3.6 where if the server returns a non 400 response code AND there is a response body (validation errors for example), FF 3.6 wont get the response body. This is a huge pain in the ass, since you cant use good REST practices. See bug here (its filed under jQuery, but my guess is its a FF bug - seems to be fixed in FF4).
Always return the headers above, not just on OPTION requests. FF needs it in the response from the POST.

Cross-Domain Cookies

Yes, it is absolutely possible to get the cookie from domain1.com by domain2.com. I had the same problem for a social plugin of my social network, and after a day of research I found the solution.

First, on the server side you need to have the following headers:

header("Access-Control-Allow-Origin: http://origin.domain:port");
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Methods: GET, POST");
header("Access-Control-Allow-Headers: Content-Type, *");

Within the PHP-file you can use $_COOKIE[name]

Second, on the client side:

Within your ajax request you need to include 2 parameters

crossDomain: true
xhrFields: { withCredentials: true }

Example:

type: "get",
url: link,
crossDomain: true,
dataType: 'json',
xhrFields: {
  withCredentials: true
}

Best Answer

Related Solutions

Javascript – How to send a cross-domain POST request via JavaScript

Cross-Domain Cookies

Related Topic