title: 403 Forbidden when using basic auth and ajax call to a REST API
body: <p>I'm trying to write a JS script to make calls to Atlassian Stash via its supported REST API.  The script resides on port 80.  The server is on port 7990.  I was originally getting cross-domain scripting errors.  I resolved this by enabling the 'CorsFilter' in web.xml for my tomcat installation.</p>
  
  <pre><code>&lt;filter&gt;
    &lt;filter-name&gt;CorsFilter&lt;/filter-name&gt;
    &lt;filter-class&gt;org.apache.catalina.filters.CorsFilter&lt;/filter-class&gt;
  &lt;/filter&gt;
  &lt;filter-mapping&gt;
    &lt;filter-name&gt;CorsFilter&lt;/filter-name&gt;
    &lt;url-pattern&gt;/*&lt;/url-pattern&gt;
  &lt;/filter-mapping&gt;
  </code></pre>
  
  <p>After restarting tomcat, the following function actually retrieved the page instead of throwing a cross-domain scripting error:</p>
  
  <pre><code>function listReviews() {
      $.get("http://mydomain:7990/rest/api/1.0/projects/", function(data) {
          // ...
      });
  }
  </code></pre>
  
  <p>However, the data was empty:</p>
  
  <pre><code>{"size":0,"limit":25,"isLastPage":true,"values":[],"start":0}
  </code></pre>
  
  <p>I figured out it needs authentication to retrieve the data I was requesting (logging out of stash resulted in the same empty response), so I created the following:</p>
  
  <pre><code>function listReviews() {
      var urlBase = 'http://mydomain:7990/rest/api/1.0/';
      var urlPart = 'projects/';
      var urlFull = urlBase+urlPart;
      var username = 'username';
      var password = 'password';
  
      $.ajax({
          type: 'GET',
          url: urlFull,
          dataType: 'json',
          context: this,
          beforeSend: function (xhr) {
              xhr.setRequestHeader ("Authorization", "Basic " + btoa(username + ":" + password));
          },
          success: function() { $('#content').append("success&lt;br&gt;"); },
          error: function() { $('#content').append("fail&lt;br&gt;"); }
      });
  }
  </code></pre>
  
  <p>However, it's now giving me a different error I'm having trouble resolving.</p>
  
  <blockquote>
    <p>XMLHttpRequest cannot load <a href="http://mydomain:7990/rest/api/1.0/projects/" rel="nofollow">http://mydomain:7990/rest/api/1.0/projects/</a>. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '<a href="http://mydomain" rel="nofollow">http://mydomain</a>' is therefore not allowed access. The response had HTTP status code 403.</p>
  </blockquote>
  
  <p>The username and password are right.  If I look at the Response Headers for the first <code>listReviews()</code> function, I see</p>
  
  <pre><code>Access-Control-Allow-Credentials:true
  Access-Control-Allow-Origin:http://mydomain
  </code></pre>
  
  <p>However, with the second <code>listReviews()</code> function, the response (403) headers do not include the above, which seems to be the issue.</p>