title: AJAX calls to fail with mixed content HTTP/HTTPS errors, can't force HTTPS
body: <p>I have a single EC2 instance running behind ELB, for which I utilized AWS Certificate Manager (ACM) to enable HTTPS.</p>
  
  <p>As suggested in a few places, I mapped both HTTP (Port 80) and HTTPS (443) to my instance's HTTP (Port 80).</p>
  
  <p>I also enabled forcing secure connections by adding these lines to .htaccess file:</p>
  
  <pre><code>RewriteEngine On
  RewriteCond %{HTTPS} !=on
  RewriteCond %{HTTP:X-Forwarded-Proto} ^http$
  RewriteRule .* https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
  </code></pre>
  
  <p>All that is working beautifully. All pages display secure content as expected, no warnings in the Console about mixed content. </p>
  
  <p>Only on pages where I make an AJAX call I get an error about mixed content and only in Chrome. FireFox works as expected but Console still shows an error.</p>
  
  <p>Error (FireFox):</p>
  
  <blockquote>
    <p>Content Security Policy: Upgrading insecure request '<a href="http://example.com/myapi/get_company/?code=abcd&amp;limit=8" rel="nofollow">http://example.com/myapi/get_company/?code=abcd&amp;limit=8</a>' to use 'https'</p>
  </blockquote>
  
  <p>Error (Chrome):</p>
  
  <blockquote>
    <p>Mixed Content: The page at '<a href="https://example.com/mypage" rel="nofollow">https://example.com/mypage</a>' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint '<a href="http://example.com/myapi/get_company/?code=abcd&amp;limit=8" rel="nofollow">http://example.com/myapi/get_company/?code=abcd&amp;limit=8</a>'. This request has been blocked; the content must be served over HTTPS.</p>
  </blockquote>
  
  <p>I opened <code>chrome://net-internals/</code> and from what I can see there are two calls the first one receives <code>HTTP 301 Permanent Redirect</code> and the second one fails because the redirect points to an HTTP page, not HTTPS.</p>
  
  <p>AJAX call looks like this:</p>
  
  <pre><code>$url = "/myapi/get_company?code=" + e;
  apiJson = $.ajax({
      url: $url, 
      dataType: 'json',
      data:{
          limit:8
      },
  success: function(data) { //Some code here },
  error: function(jqXHR, textStatus, errorThrown) { //Some code here }
  });
  </code></pre>
  
  <p>I also tried giving the full URL including the protocol but that didn't make a difference.</p>