How to receive an image via backbone?

Question

I'm trying to receive images via backbone from a server. The backend application uses CakePHP (which is not important at the moment I guess). The backend returns a a JSON response:

{"id":"4","waypoint_id":"56","user_id":"1","name":"Penguins.jpg","type":"image\/jpeg","size":"777835","created":"2014-03-10 18:05:29","modified":"2014-03-10 18:05:29","owner":"Nikel Weis"}

Which is fine so far - but as soon as I add the data attribute which contains the actual blob from the database it does not work. I've tried to encode it to a base64 string (in php) with:

$response['data'] = base64_encode($response['data']);

But then the client returns:

OPTIONS http://mytour.localhost/api/file/4 No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4400' is therefore not allowed access.

But the header is set. My file model in backbone looks like (pretty straight forward) this:

define([
    'jquery',
    'jqm',
    'underscore',
    'backbone',
], function($, jqm, _, Backbone) {

File = Backbone.Model.extend({

    idAttribute: 'id',

    urlRoot: '/api/file',

    initialize:function(attributes, options) {
    },  

});

return File;
});

So how can I receive (base64 encoded) files using backbone? Or is my approach completly wrong here?

EDIT: Sent headers:

$this->response->header('Access-Control-Allow-Origin', '*');
$this->response->header('Access-Control-Allow-Headers', 'X-Requested-With');

I'm able to receive the response when the base64encoded string is not present.

EDIT - Solution: What I should have mentioned is, that I'am using ripple to emulate a phonegap environment. Now I've figured out couple of things:

1. The problem was not the base64 encoding - the problem occured when the string exceeded around 4000 characters. The response from the server was not handled properly by ripple.

2. Ripple has a feature to proxy cross domain requests. I had that proxy turned off. By switching the proxy to local or remote the limitation of ~4000 characters in a JSON-Response is not kicking in. This was not a shortcoming of JSON or whatsover due to the fact that there is no limit in strings handed back to the client.

Answer 1

$this->response->header("Access-Control-Allow-Methods", "POST, PUT, GET, DELETE, HEAD, OPTIONS");

read here, a very good explanation with php code. Other than that...read the CakePHP security doc. I know some framework blankout The CSRF token on options request. Last thing to try is create a pure php code handle the request and see whether CakePHP is indeed blocking the request.