php - Backbone.js/Silex CORS request

577

I'm currently experimenting with Backbone.js and I'm having a bit of trouble with CORS requests.

I've set up a basic PHP-based API using Silex and set the Backbone model/collection to point it. Looking through the Chrome Network tab, I can see the pre-flight OPTIONS request is working:

Request

OPTIONS /todo/ HTTP/1.1
Host: api.backbone.dev
Connection: keep-alive
Access-Control-Request-Method: POST
Origin: http://backbone.dev
User-Agent: ...
Access-Control-Request-Headers: accept, origin, x-http-method-override, content-type
Accept: */*
Referer: http://backbone.dev/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-GB,en;q=0.8,en-US;q=0.6,de;q=0.4

Response

HTTP/1.1 200 OK
Server: nginx/1.4.2
Content-Type: text/html; charset=UTF-8
Transfer-Encoding: chunked
Connection: keep-alive
Vary: Accept-Encoding
X-Powered-By: PHP/5.5.1-2+debphp.org~precise+2
Access-Control-Allow-Origin: http://backbone.dev
Access-Control-Allow-Methods: GET,PUT,POST,DELETE,OPTIONS
Access-Control-Allow-Headers: X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version, X-HTTP-Method-Override, Origin
Cache-Control: no-cache
Content-Encoding: gzip

But on POST, the console returns:

XMLHttpRequest cannot load http://api.backbone.dev/todo/. Origin http://backbone.dev is not allowed by Access-Control-Allow-Origin.

My Nginx Server block includes the below Access-Control headers:

add_header 'Access-Control-Allow-Origin' 'http://backbone.dev';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Headers' 'Content-Type,Accept,X-HTTP-Method-Override,Origin';
add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';

The OPTIONS request didn't work at all until I added the headers below in the PHP response:

array(
    'Access-Control-Allow-Origin' => 'http://backbone.dev',
    'Access-Control-Allow-Methods' => 'GET,PUT,POST,DELETE,OPTIONS',
    'Access-Control-Allow-Headers' => 'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version, X-HTTP-Method-Override, Origin'
);

And now the POST requests aren't returning anything.

I genuinely can't see what's going wrong with the request. Any help is appreciated.

476

Answer

Solution:

I realize that this question is fairly old, but since there is not yet an accepted answer, I'll offer mine.

I've built a silex service provider for CORS https://github.com/jdesrosiers/silex-cors-provider. It takes care of all the work, including creating the OPTIONS routes @igorw talks about and setting necessary headers. It's easy to use and fairly flexible.

743

Answer

Solution:

For CORS you need to handle the OPTIONS request. With silex you can do that usingmatch and->method('OPTIONS').

$app->match('/path', $controller)->method('OPTIONS');

You might want to look at something like Stack/Cors (more docs on Stack) that handles the CORS pre-flight request andAccess-Control-Allow-* headers for you.

People are also looking for solutions to the problem: OOP PHP SQL select

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.