title: Access-Control-Allow-Origin not working with Backbone json requests, Nginx settings "wide-open", headers look fine
body: <p>Hello I need to make json requests from Backbone to an API (I have control over server-side)..
  I keep getting the Access-Control-Allow-Origin, although response headers looks fine.</p>
  
  <p>Here are Nginx settings: </p>
  
  <pre><code>location / {
       if ($request_method = 'OPTIONS') {
          add_header 'Access-Control-Allow-Origin' '*';
          add_header 'Access-Control-Allow-Credentials' 'true';
          add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
          add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
          add_header 'Access-Control-Max-Age' 1728000;
          add_header 'Content-Type' 'text/plain charset=UTF-8';
          add_header 'Content-Length' 0;
          return 204;
       }
       if ($request_method = 'POST') {
          add_header 'Access-Control-Allow-Origin' '*';
          add_header 'Access-Control-Allow-Credentials' 'true';
          add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
          add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
       }
       if ($request_method = 'GET') {
          add_header 'Access-Control-Allow-Origin' '*';
          add_header 'Access-Control-Allow-Credentials' 'true';
          add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
          add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
       }
  passenger_enabled on;
  } 
  </code></pre>
  
  <p>here are the request / response headers from console:</p>
  
  <pre><code>Request headers
  DNT: 1
  X-Requested-With: XMLHttpRequest
  User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/534.57.7 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.7
  Accept: */*;q=0.5, text/javascript, application/javascript, application/ecmascript, application/x-ecmascript
  Referer: http://&lt;address&gt;/
  
  Response Headers
  Access-Control-Request-Method: *
  X-Powered-By: Phusion Passenger (mod_rails/mod_rack) 3.0.14
  Transfer-Encoding: Identity
  Status: 200
  Connection: keep-alive
  X-Request-Id: 2917f130c8699182ee9cdc047c1926fe
  X-UA-Compatible: IE=Edge,chrome=1
  X-Runtime: 0.455212
  Server: nginx/1.2.2 + Phusion Passenger 3.0.14 (mod_rails/mod_rack)
  Etag: "346cee46bab7061e866fa064df95c845"
  Content-Type: text/html; charset=utf-8
  Access-Control-Allow-Origin: *
  Cache-Control: max-age=0, private, must-revalidate
  Set-Cookie: _y_app_session=BAh7CEkiD3Nlc3Npb25faWQGOgZFRkkiJWE2Zjg3YWQ0NDFjZWNiM2VmNTg2ZDhiYmIyOGFlYmIwBjsAVEkiEF9jc3JmX3Rva2VuBjsARkkiMUxBSzFKTDJQWG1sa2dhbXRLM2ptQmxjenRkZEdJeVh1MDFhaUVuaXE1dFE9BjsARkkiCmZsYXNoBjsARm86JUFjdGlvbkRpc3BhdGNoOjpGbGFzaDo6Rmxhc2hIYXNoCToKQHVzZWRvOghTZXQGOgpAaGFzaHsAOgxAY2xvc2VkRjoNQGZsYXNoZXN7CDoLbm90aWNlMDoLZXJyb3JzMDoKZXJyb3IwOglAbm93MA%3D%3D--648ffcb1b2869f1da57773459307ca1ac5fb8bfb; path=/; HttpOnly
  Access-Control-Allow-Headers: *
  </code></pre>
  
  <p><strong>* UPDATE *</strong> </p>
  
  <p>I am currently using <a href="http://github.com/yaoweibin/nginx_cross_origin_module" rel="nofollow">http://github.com/yaoweibin/nginx_cross_origin_module</a> and it allows me to make requests from console. </p>
  
  <p>I have set up the nginx as in instructions in the repo above.</p>
  
  <pre><code>    cors on;
      cors_max_age     3600;
      cors_origin_list unbounded;
      cors_method_list GET HEAD PUT POST;
      cors_header_list unbounded;
  
      server {
       ## Server stuff.. 
       # passenger stuff
     }
  </code></pre>
  
  <p>So I can do:</p>
  
  <pre><code> var xhr = new XMLHttpRequest()
   xhr.open('GET', 'http://www.api.com/plots.json')
   xhr.send();
  </code></pre>
  
  <p>When I do fetch via Backbone with the model that has 'http://www.api.com/plots.json' as url I get Same origin errors. </p>
  
  <p>** UPDATE **</p>
  
  <p>So I switched to more_set_headers and can do .fetch() now... Still cannot make POST or do collection.create();</p>
  
  <p>Here is the latest Nginx setup:</p>
  
  <pre><code>server {
  
                listen 80;
                server_name api.app.com;
                root /home/ubuntu/app/current/public;
                passenger_enabled on;
  
  
      location / {
          if ($request_method = 'OPTIONS') {
               more_set_headers 'Access-Control-Allow-Origin: *';
               more_set_headers "Access-Control-Allow-Methods: OPTIONS, GET, PUT, DELETE, POST";
               more_set_headers "Access-Control-Allow-Headers:  x-requested-with";
               more_set_headers "Access-Control-Max-Age: 1728000";
               more_set_headers 'Content-Type: text/plain; charset=UTF-8';
               more_set_headers 'application/json; charset=utf-8';
               return 200;
              }
  
            if ($request_method = 'POST') {
             more_set_headers "Access-Control-Allow-Origin: http://vidoai.com";
             more_set_headers "Access-Control-Allow-Methods: GET, POST, OPTIONS";
             more_set_headers 'Access-Control-Allow-Headers: DNT, X-Mx-ReqToken, Keep-Alive,  User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type';
             more_set_headers 'Content-Type: application/json, text/javascript,  */*';
           }
  
  
  passenger_enabled on;
      }
  
  
          if ($request_method !~ ^(GET|HEAD|POST|PUT|DELETE)$ ) {
             return 444;  # block requests that Rails doesn't handle
            }
  
  
  
  
  
  }
  </code></pre>
  
  <p>What am I missing?? </p>