Monday, November 11, 2013

Cross Domain AJAX Calls and SharePoint Apps on Office 365

To give a bit of background, I have been exploring architectures and various components needed to create a multi-tenant SharePoint App. So far I have settled on using SharePoint only, as a frontend layer and using external services to drive the entire backend, including storage.
Given this high level design the first interesting item that I came across was while posting data to the backend Service from a SharePoint Hosted App. The classic client side Cross-domain security issue. Here are some of the solutions out there for this issue:
  • Using the JSONP hack
    • Due to its nature, this only works for ‘GET’ requests and I wanted to do a ‘POST.
  • Using the default SharePoint 2013 Web Proxy
    • I was able to make the ‘GET’ requests work with this approach but not the ‘POST’ requests.
  • Creating a Custom Proxy
    • Worked but involved quite a few hoops and a remote web page, which I did not want to create.
  • Enabling Cross Origin Resource Sharing (CORS) in WCF Services
    • Worked perfectly !!!
For simple requests we can enable CORS by setting some response headers like Access-Control-Allow-Origin, Access-Control-Allow-Methods and Access-Control-Allow-Headers with the value ‘*’. 
But all requests from Office 365 contain special headers and hence they are ‘Preflighted’, which means they would first send an http request with “OPTIONS” method to check the domain and then send the actual request. (More details on Preflighted requests here) For Preflighted requests we need to write some extra code along with adding the response headers. Here is a good article with sample code that explains this and below is the snap shot of the code:
image
image
image
And here is the snap shot of the sample app working on Office 365:
image

Additional Resources on CORS and Multitenant Applications with Azure:

4 comments:

Unknown said...

Hey Jomit,

POST does work in web.proxy, body format matters, I was struck on these quite sometime, where I used " tags instead of ' and I was getting wired responses. You can may be start with a simple calls and build from that.

Jomit Vaghela said...

Hey Senthil, Glad that it worked for you. I hate when these layers of abstractions come back to haunt us instead of helping us..

Anonymous said...

Lookup Plus for SharePoint 2013, It is more than Sharepoint Lookup. Cascaded Lookup, Filtered lookup, Cross-site Lookup /drop down/ and
some controls are free. ("Create new item" link) Visit, http://www.azu.mn
Or watch the channel http://www.youtube.com/watch?v=70-hXWY6ARY&list=PL-5v3e65O1cFMddgCpzIURE_UAsL-oDdW

Kellox84 said...

Hi Jomit,

nice article about cors. 2 Weeks ago i dive into SharePoint Apps. And now i want to write my own webservice which i host on the azure site which i will consume in a sharepointonline site.
It would be very nice if you could pack your code of the article in a download-zip. Would it be possible ?

Thank you !

AddIn