Cross-domain AJAX with jsonp

May 26, 2014 mgroves 0 Comments
Tags: jQuery json asp.net mvc

I have a web page on domain A and, say, a Json endpoint on domain B. I would like domain A to make an Ajax request to domain B, but when I try that, I get an error message, as shown here:

Some options:

  • Make the request server-side instead of client side.
  • If you have control of the endpoint, add "Access-Control-Allow-Origin" to the response header.
  • Use jsonp (you may still need control of the endpoint if it doesn't support jsonp already).

Let's explore the jsonp option. Here's a similar request to the one above, except this time it's using jsonp.

It does not raise an error.

The way jsonp works is a little wacky, but the main thing you need to know is that you need to specify a callback function. jQuery handles this automatically on the client side. Here's how I handle it on the server side with ASP.NET MVC using the Mvc.Jsonp package.

Notice three things:

  1. SomeController inherits from JsonpControllerBase
  2. GetAllItems return type is JsonpResult and has a "callback" string parameter
  3. The Jsonp function from the base class and how callback is passed to it.

The benefit is that you can now do cross-domain scripting. So far the drawbacks seems to be that:

  • It's limited to GET requests
  • Error handling may take some extra work
  • If there is no Jsonp endpoint, then you either have to make one or you're out of luck.

I'm giving it a shot on Ledger, and seems to be working fine so far.

Comments

Matthew D. Groves

About the Author

Matthew D. Groves lives in Central Ohio. He works remotely, loves to code, and is a Microsoft MVP.

Latest Comments

Twitter