title: jquery ajax https call gives ERR_INSECURE_RESPONSE
body: <p>I'm trying to make a https CORS ajax call from jquery to a node.js process. However When ever the call is made chrome complains in the console <code>OPTIONS https://localhost/ net::ERR_INSECURE_RESPONSE</code>.</p>
  
  <p>Looking at a similar stack overflow question, <a href="https://stackoverflow.com/questions/11690191/cross-domain-request-from-http-to-https-aborts-immediately">Cross domain request from HTTP to HTTPS aborts immediately</a> I should be able to make cross origin https ajax calls if I import the self signed cert I made. So I imported the cert into chrome. I can see the certificate in chrome's manage certificates tab under Authorities. But it still fails when I try the ajax call.</p>
  
  <p>This is how I made the private key:
  <code>openssl genrsa -out domain.key 4096</code></p>
  
  <p>Now the cert:
  <code>openssl req -x509 -sha512 -nodes -newkey rsa:4096 -keyout domain.key -out domain.crt</code></p>
  
  <p>For common name I put the IP address of the computer so chrome would not complain about a URL mismatch.</p>
  
  <p>Here is the html page.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;title&gt;BlackBox&lt;/title&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;script src="jquery-1.11.2.min.js"&gt;&lt;/script&gt;
      &lt;script src="bootstrap-3.3.4-dist/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="login.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="container-fluid"&gt;
        &lt;div class="row"&gt;
          &lt;div class=col-md-4&gt;
            &lt;h2&gt; Welcome to BlackBox&lt;/h2&gt;
            &lt;label&gt;username&lt;/label&gt;
            &lt;input type="text" name="username" id="username"&gt;
            &lt;label&gt;password&lt;/label&gt;
            &lt;input type ="text" name="password" id="password"&gt;
            &lt;input type="button" id="loginbtn" value="Login"/&gt;
            &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                &lt;div class="out"&gt;&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
       &lt;/div&gt;
     &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>This is the javascript that goes along with the html.</p>
  
  <pre><code> $(document).ready(function() {
     $('#loginbtn').click(clickLogin);
       function clickLogin() {
         var username = $('#username').val();
         var password = $('#password').val();
         if(password == '' || username == '') {
           $(".out").html("Empty username or password");
           } else {
           $.ajax({
             type: "PUT",
             url: "https://localhost/",
             contentType: "application/json",
             data: JSON.stringify({
               username: username,
               password: password,
             }),
             dataType: "text",
         })
       }
     };
   });
  </code></pre>
  
  <p>And finally here is the node process that both serves the html and javascript and is suppose to receive the ajax calls.</p>
  
  <pre><code>const fs = require("fs");
  const http = require('http');
  const https = require('https');
  
  var loginPage = fs.readFileSync('login.html');
  var loginPageJs = fs.readFileSync('login.js');
  var jquery = fs.readFileSync('jquery-1.11.2.js');
  var bootstrap = fs.readFileSync('bootstrap-3.3.4-dist/js/bootstrap.min.js')
  
  var options = {
    key: fs.readFileSync('domain.key'),
    cert: fs.readFileSync('domain.crt')
  };
  
  http.createServer(function(req, res) {  
    res.writeHead(301, {Location: 'https:192.168.1.58/'})
    res.end();
  }).listen(80);
  
  https.createServer(options, function(req, res) {
  
    if(req.method === 'GET' &amp;&amp; req.url === '/') {
    res.writeHead(200, "OK", {'Content-Type': 'text/html'});
    res.write(loginPage);
    res.end();
  } else if(req.method === 'GET' &amp;&amp; req.url === '/login.js') {
    res.writeHead(200, "OK", {'Content-Type': 'application/javascript'});
    res.write(loginPageJs);
    res.end();
  } else if(req.method === 'GET' &amp;&amp; req.url === '/jquery-1.11.2.js') {
    res.writeHead(200, "OK", {'Content-Type': 'application/javascript'});
    res.write(jquery);
    res.end();
  } else if(req.method === 'GET' &amp;&amp; req.url === '/bootstrap-3.3.4-     dist/js/bootstrap.min.js') {
    res.writeHead(200, "OK", {'Content-Type': 'application/javascript'});
    res.write(bootstrap);
    res.end();
  } else if(req.method === "OPTIONS" &amp;&amp; req.url === '/') {
    res.writeHead(204, "No Content", {
      "access-control-allow-origin": origin,
      "access-control-allow-methods": "GET, POST, PUT, DELETE, OPTIONS",
      "access-control-allow-headers": "content-type, accept",
      "access-control-max-age": 10,
      "content-length": 0
    });
  
    var requestBodyBuffer = [];
  
    req.on("data", function(chunk) {
      requestBodyBuffer.push(chunk);
    })
  
    req.on("end", function() {
      var requestBody = requestBodyBuffer.join("");
      var obj = JSON.parse(requestBody);
      if(obj.hasOwnProperty('username') &amp;&amp; obj.hasOwnProperty('password'))  {
        console.log(obj.username);
        console.log(obj.password);
      }
    })
   }
  
  }).listen(443);
  </code></pre>