How to Solve Cross Origin Access Problems in Sencha Touch

It’s been a little while since I’ve had to design a Sencha Touch application with a server side backend. In this case I’m using a PHP + MySQL backend and need to POST data with an Ajax proxy to the server, and also receive data back in a JSON format. As usual I ran head first into Cross Origin Resource Sharing errors, and it took me a little while tinkering to get everything set up correctly again. If you’ve ended up here, you might be facing errors like this:

XMLHttpRequest cannot load [URL]. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. XMLHttpRequest cannot load [URL]. Origin [URL] is not allowed by Access-Control-Allow-Origin. Request header field Content-Type is not allowed by Access-Control-Allow-Headers

If you want to find out more about what Cross Origin Resource Sharing is you should take a look here. Essentially, it’s a specification to control sharing between different domains. Generally, if you make a request from X.com to Y.com it will be restricted. But using CORS we can set headers to allow access from different domains.

I wanted to create this post to document the steps required to get an Ajax proxy working correctly, both sending and receiving data from the back-end. This all comes down to using the right proxy (there’s also the option of using a JSON / JSONP proxy), and making sure the headers are set correctly. Your proxy should look something like this:

proxy: {
	type: 'ajax',
	api: {
		create: 'http://example.com/users.php?action=createuser',
		read: 'http://example.com/users.php?action=readuser',
		update: 'http://example.com/users.php?action=updateuser',
		destroy: 'http://examples/users.php?action=destroyuser',
	},
	reader: {
		type: 'json',
		rootProperty: 'users'
	}
}

To set the headers correctly you can either set them on the server itself, or control them with PHP. To set the headers on the server, you can add the following in your ‘example.com.conf’ file (usually located at /etc/apache2/sites-available) between the <VirtualHost> tags:

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET,POST,OPTIONS"
Header set Access-Control-Allow-Headers "Content-Type,x-prototype-version,x-requested-with"

Obviously this depends on your server set up though. Make sure to run ‘sudo service apache2 restart’ afterwards. To set them through PHP use the following headers in your ‘users.php’ file or whatever yours is called:

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type,x-prototype-version,x-requested-with');

That should hopefully clear up any CORS problems you were having with your Sencha Touch application (this advice would apply to much more than just Sencha touch applications as well). If you’re still having problems, leave a comment below and we’ll see if we can figure it out!