title: How do I avoid cross-origin issues when requesting data from a sub-domain?
body: <p>On my site www.example.com, I submit an ajax request to a sub-domain:</p>
  
  <pre><code>function submit(json_data) {
    return $.ajax({
       type: 'POST',
       url: "https://sub-domain.example.com",
       data: json_data
    });
  }
  </code></pre>
  
  <p><a href="https://sub-domain.example.com" rel="nofollow">https://sub-domain.example.com</a> points to a different IP address (on Amazon ec2) than example.com. This all used to work fine. However, when I changed example.com to HTTPS only, I started getting errors such as the following:</p>
  
  <blockquote>
    <p>XMLHttpRequest cannot load <a href="https://sub-domain.example.com" rel="nofollow">https://sub-domain.example.com</a>. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '<a href="https://www.example.com" rel="nofollow">https://www.example.com</a>' is therefore not allowed access. The response had HTTP status code 522.</p>
  </blockquote>
  
  <p>I use Cloudflare. What's a simple way to fix this error?</p>
  
  <ul>
  <li>Can I change a setting in Cloudflare so there's no issue? I thought of setting up a page at example.com/sub-domain that pointed to the same IP address as before, but this didn't seem possible.</li>
  <li>Is there a simple change I can do to the request? I tried using jsonp, but that didn't work with POST. </li>
  <li>If that's not possible, how do I change the actual sub-domain to allow such requests from example.com?</li>
  </ul>