title: CORS working with jQuery but not with Prototype
body: <p>I'm working on the Magento platform but this is really a JS issue I'm having here.</p>
  
  <p>Here's the thing:</p>
  
  <p>I'm <strong>working on an AJAX login feature</strong> and I would like the <strong>login actions to go through HTTPS wherever you're browsing the Magento website in HTTP or HTTPS.</strong></p>
  
  <p>So I faced this <strong>CORS problem because protocols need to match.</strong></p>
  
  <p>So I have my Magento controller action code that includes the following:</p>
  
  <pre><code>$this-&gt;getResponse()
          -&gt;setHeader('Access-Control-Allow-Origin', rtrim(Mage::getUrl(''),'/'))
          -&gt;setHeader('Access-Control-Allow-Headers', 'Access-Control-Allow-Origin, Access-Control-Allow-Headers, Access-Control-Allow-Credentials')
          -&gt;setHeader('Access-Control-Expose-Headers', 'x-json')
          -&gt;setHeader('Access-Control-Allow-Credentials', 'true')
          -&gt;setBody(Mage::helper('core')-&gt;jsonEncode($result));
  </code></pre>
  
  <p>And I <strong>managed to get it working using the following jQuery code</strong>:</p>
  
  <pre><code> jQuery.ajax({
          type: "POST",
          url: jQuery('#ajaxlogin-login-form').attr('action'),
          xhrFields: {
              withCredentials: true
          },
          crossDomain: true,
          data: jQuery('#ajaxlogin-login-form').serialize(),
          success: function(data, status, xhr) {
       }
   });
  </code></pre>
  
  <p>With this code, when I'm browsing in HTTP and I try to login, <strong>it logs in fine and when I go back to HTTP I can see that I'm logged in.</strong> So far so good.</p>
  
  <p>But I want to avoid using jQuery and <strong>want to do it via prototype</strong> so I tried several things including the following:</p>
  
  <pre><code>new Ajax.Request($('ajaxlogin-login-form').action, {
              requestHeaders: {
                  "Access-Control-Allow-Headers" : "Access-Control-Allow-Origin, Access-Control-Allow-Credentials, Access-Control-Allow-Headers",
                  "Access-Control-Allow-Origin" : "https://my.dev.website",
                  "Access-Control-Allow-Credentials" : true,
              },
              method: "post",
              parameters: $('ajaxlogin-login-form').serialize(),
              onCreate: function(response) {
                  var t = response.transport;
                  t.setRequestHeader = t.setRequestHeader.wrap(function(original, k, v) {
                      if (/^(accept|accept-language|content-language|access-control-allow-origin|access-control-allow-headers|access-control-allow-credentials)$/i.test(k))
                          return original(k, v);
                      if (/^content-type$/i.test(k) &amp;&amp;
                          /^(application\/x-www-form-urlencoded|multipart\/form-data|text\/plain)(;.+)?$/i.test(v))
                          return original(k, v);
                      return;
                  });
              },
              onSuccess: function(transport) {
              }
   });
  </code></pre>
  
  <p>The problem in that case is that <strong>the login works fine (I can't see by debugging my controller that the login is successful) however when I go back to viewing the website in HTTP, I'm not logged in. But I'm logged in when viewing in HTTPS.</strong> </p>
  
  <p>So here are my questions:</p>
  
  <ul>
  <li><strong>what does my jQuery code do that my prototype code doesn't ?</strong></li>
  <li>specially, <strong>what makes the login works on both HTTP and HTTPS with the jQuery code</strong> ?</li>
  <li>and thus, how do I <strong>fix my prototype code to get it to behave the same way as my jQuery code ?</strong></li>
  </ul>