title: Make a http request with ajax for basic authorization and cors
body: <p>The config for my httpd server <code>111.111.111.111</code> (supposed).<br>
  Config for cors and basic auth in  <code>/etc/httpd/conf/httpd.conf</code>.</p>
  
  <pre><code>&lt;Directory "/var/www/html"&gt;
      Options Indexes FollowSymLinks
      AllowOverride AuthConfig
      Require all granted
      Header always set Access-Control-Allow-Origin "*"
      Header always set Access-Control-Allow-Methods "POST, GET, PUT, DELETE, OPTIONS"
      Header always set Access-Control-Allow-Credentials "true"
      Header always set Access-Control-Allow-Headers "Authorization,DNT,User-Agent,Keep-Alive,Content-Type,accept,origin,X-Requested-With"
  &lt;/Directory&gt;
  </code></pre>
  
  <p>Make some more configs for basic authorization on my server <code>111.111.111.111</code>.</p>
  
  <pre><code>cd /var/www/html &amp;&amp; vim .htaccess
  AuthName "login"  
  AuthType Basic  
  AuthUserFile /var/www/html/passwd  
  require user username 
  </code></pre>
  
  <p>Create password for username.</p>
  
  <pre><code>htpasswd -c /var/www/html/passwd username
  </code></pre>
  
  <p>Reboot httpd with :</p>
  
  <pre><code>systemctl restart httpd
  </code></pre>
  
  <p>The <code>/var/www/html/remote.html</code> on the server <code>111.111.111.111</code> .  </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta http-equiv="Access-Control-Allow-Origin" content="*" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;p&gt;it is a test &lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Test it with username and passwd when to open <code>111.111.111.111\remote.html?username=xxxx&amp;password=xxxx</code> in browser. </p>
  
  <pre><code>it is a test
  </code></pre>
  
  <p>Get the response header with curl.</p>
  
  <pre><code>curl -u xxxx:xxxx -I  http://111.111.111.111/remote.html
  HTTP/1.1 200 OK
  Date: Thu, 06 Sep 2018 00:59:56 GMT
  Server: Apache/2.4.6 (CentOS) OpenSSL/1.0.2k-fips PHP/5.4.16
  Access-Control-Allow-Origin: *
  Access-Control-Allow-Methods: POST, GET, PUT, DELETE, OPTIONS
  Access-Control-Allow-Credentials: true
  Access-Control-Allow-Headers: Authorization,X-PINGOTHER,DNT,User-Agent,Keep-Alive,Content-Type,accept,origin,X-Requested-With
  Last-Modified: Wed, 05 Sep 2018 15:01:05 GMT
  ETag: "f5-575210b30e3cb"
  Accept-Ranges: bytes
  Content-Length: 245
  Content-Type: text/html; charset=UTF-8
  </code></pre>
  
  <p>Add a parameter  <code>OPTIONS</code> in header .</p>
  
  <pre><code>curl -X OPTIONS -i http://111.111.111.111/remote.html
  
  HTTP/1.1 401 Unauthorized
  Date: Thu, 06 Sep 2018 06:42:04 GMT
  Server: Apache/2.4.6 (CentOS) OpenSSL/1.0.2k-fips PHP/5.4.16
  Access-Control-Allow-Origin: *
  Access-Control-Allow-Methods: POST, GET, PUT, DELETE, OPTIONS
  Access-Control-Allow-Credentials: true
  Access-Control-Allow-Headers: Authorization,X-PINGOTHER,DNT,User-Agent,Keep-Alive,Content-Type,accept,origin,X-Requested-With
  WWW-Authenticate: Basic realm="please login"
  Content-Length: 381
  Content-Type: text/html; charset=iso-8859-1
  
  &lt;!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"&gt;
  &lt;html&gt;&lt;head&gt;
  &lt;title&gt;401 Unauthorized&lt;/title&gt;
  &lt;/head&gt;&lt;body&gt;
  &lt;h1&gt;Unauthorized&lt;/h1&gt;
  &lt;p&gt;This server could not verify that you
  are authorized to access the document
  requested.  Either you supplied the wrong
  credentials (e.g., bad password), or your
  browser doesn't understand how to supply
  the credentials required.&lt;/p&gt;
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>Add <code>OPTIONS</code> and basic authorization in header.</p>
  
  <pre><code>curl -X OPTIONS -u xxxx:xxxxx  -i http://111.111.111.111/remote.html
  
  HTTP/1.1 200 OK
  Date: Thu, 06 Sep 2018 06:42:54 GMT
  Server: Apache/2.4.6 (CentOS) OpenSSL/1.0.2k-fips PHP/5.4.16
  Access-Control-Allow-Origin: *
  Access-Control-Allow-Methods: POST, GET, PUT, DELETE, OPTIONS
  Access-Control-Allow-Credentials: true
  Access-Control-Allow-Headers: Authorization,X-PINGOTHER,DNT,User-Agent,Keep-Alive,Content-Type,accept,origin,X-Requested-With
  Allow: POST,OPTIONS,GET,HEAD,TRACE
  Content-Length: 0
  Content-Type: text/html; charset=UTF-8
  </code></pre>
  
  <p>Ok, everything is good status.<br>
  Let's try ajax's basic authorization.    </p>
  
  <p>The <code>/var/www/html/test.html</code> on my local apache.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;script src="http://127.0.0.1/jquery-3.3.1.js"&gt;&lt;/script&gt;
      &lt;script&gt;
      function Ajax( ) {
          var url = 'http://111.111.111.111/remote.html';
          $.ajax(url, {
              type:"get",
              dataType: 'html',
              withCredentials: true,
              username: "xxxx",
              password: "xxxx",
              success:function(response){
                  mytext = $("#remote");
                  mytext.append(response);
              },
              error: function (e) {
                  alert("error");
              }    
          });
      };
      &lt;/script&gt;
  
      &lt;input type="button" value="show content" onclick="Ajax();"&gt;
      &lt;p id="remote"&gt;the content on remote webpage&lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>To click <code>show content</code> button when to input <code>127.0.0.1/test.html</code>,i got the error:</p>
  
  <pre><code>GET http://111.111.111.111/remote.html 401 (Unauthorized)
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/bPVDj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bPVDj.png" alt="enter image description here"></a>    </p>
  
  <p>I have given a detailed description based on httpd setting (centos7) and ajax and others related to the issue, please download my code and save it in your vps and local htdocs directory, replace ip with your real ip, reproduce the process.<br>
  I  beg you not to make any comments until you reproduce the process.<br>
  you may find what happened, maybe it is same as mine here.  </p>
  
  <p>Two important elements in the issue.<br>
  1.httpd setting  in the file <code>/etc/httpd/conf/httpd.conf</code>.<br>
  2.ajax code<br>
  Which one is wrong?<br>
  How to fix it?  </p>
  
  <p>I have some clue to solve the issue, thanks to @sideshowbarker.</p>
  
  <p><a href="http://%20%20[2]:%20https://stackoverflow.com/questions/45405983/http-status-code-401-even-though-i-m-sending-an-authorization-request-header/45406085#45406085" rel="nofollow noreferrer">reason</a></p>
  
  <p>The problem turns into another one:<br>
  How to configure the apache to not require authorization for OPTIONS requests?<br>
  I have tried as  <code>Disable authentication for HTTP OPTIONS method (preflight request)</code> say.    </p>
  
  <p><a href="http://%20%20[2]:%20https://stackoverflow.com/questions/45405983/http-status-code-401-even-though-i-m-sending-an-authorization-request-header/45406085#45406085" rel="nofollow noreferrer">Disable authentication for HTTP OPTIONS method (preflight request)e</a></p>
  
  <pre><code>&lt;Directory "/var/www/html"&gt;
  &lt;LimitExcept OPTIONS&gt;
    Require valid-user
  &lt;/LimitExcept&gt;
  &lt;/Directory&gt;
  </code></pre>
  
  <p><code>systemctl restart httpd</code>,failed.     </p>