title: CORS issue in Jquery with GET method
body: <p>I am working on getting a data through a URL with GET method available.
  I have used the Jquery to get the JSON and parse it into HTML table.</p>
  
  <p>However, I cannot fix the CORS issue. I have added the code:</p>
  
  <pre><code>res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
  res.header('Access-Control-Allow-Credentials', 'True');
  res.header('Access-Control-Allow-Headers', 'accept, content-type, x-parse-application-id, x-parse-rest-api-key, x-parse-session-token');
  </code></pre>
  
  <p>I have also installed the chrome extension to enable CORS.</p>
  
  <p>However, none of them worked. I have also tried to use XMLHttpRequest directly, it still doesn't work... </p>
  
  <p>Here is my code using Jquery:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;&lt;meta charset="utf-8"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
   var url = 'https://www.probancemail.com/rest/v2/stats/RT1-PREM_DE?&amp;token=5eX8dIljx9fWOvFu7WO22uL3EEYSN8PEciwZKdYqKxK6HOsHxjyYQpVBQiSLEGOJkId9wTNOAUpGRPfPWJgXV5u8s9EUL9hVeGSa'
  function FIXCORS(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
  res.header('Access-Control-Allow-Credentials', 'True');
  res.header('Access-Control-Allow-Headers', 'accept, content-type, x-parse-application-id, x-parse-rest-api-key, x-parse-session-token');
   // intercept OPTIONS method
  if ('OPTIONS' == req.method) {
    res.send(200);
  }
  else {
    next();
  }
  };
  $(document).ready(function () {
  $.getJSON(url,
  function (json) {
  tr = $("&lt;tr&gt;&lt;/tr&gt;")
  for (var i = 0; i &lt; json.results.length; i++) {
  var td = "&lt;td&gt;" + json.results[i].address_components[0].long_name+"&lt;/td&gt;"
  $(tr).append(td);
  }
  $('table').append($(tr));
  });
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;table&gt;&lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>It always shows the error message of No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.</p>
  
  <p>And is my code using HTTP Request directly, which is based on this article: <a href="https://www.html5rocks.com/en/tutorials/cors/" rel="nofollow noreferrer">https://www.html5rocks.com/en/tutorials/cors/</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;&lt;meta charset="utf-8"/&gt;
  &lt;head&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
  function reqListener() {
  console.log(this.responseText);
  }
  // Create the XHR object.
  function createCORSRequest(method, url) {
  var xhr = new XMLHttpRequest();
  if ("withCredentials" in xhr) {
  // XHR for Chrome/Firefox/Opera/Safari.
  xhr.open(method, url, true);
  } else if (typeof XDomainRequest != "undefined") {
  // XDomainRequest for IE.
  xhr = new XDomainRequest();
  xhr.open(method, url);
  } else {
  // CORS not supported.
  xhr = null;
  }
  return xhr;
  }
  
  // Helper method to parse the title tag from the response.
  function getTitle(text) {
  return text.match('/campaign');
  }
  
  // Make the actual CORS request.
  function makeCorsRequest() {
  // This is a sample server that supports CORS.
  var url = 'https://www.probancemail.com/rest/v2/stats/RT1-PREM_DE?&amp;token=5eX8dIljx9fWOvFu7WO22uL3EEYSN8PEciwZKdYqKxK6HOsHxjyYQpVBQiSLEGOJkId9wTNOAUpGRPfPWJgXV5u8s9EUL9hVeGSa';
  
  var xhr = createCORSRequest('GET', url);
  if (!xhr) {
  alert('CORS not supported');
  return;
   }
  
   // Response handlers.
  xhr.onload = function() {
  var text = xhr.responseText;
  var title = getTitle(text);
  alert('Response from CORS request to ' + url + ': ' + title);
   };
  
  xhr.onerror = function() {
  alert('Woops, there was an error making the request.');
  };
   xhr.send();
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id = "div"&gt;&lt;/div&gt;
  &lt;button type = "button" onclick = "makeCorsRequest"&gt;Retrieve Report Data&lt;/button&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This one doesn't have error message but has no outcome at all...
  Is there anyone have some thoughts?
  Any feedback is welcomed!!!
  Thanks a lot in advance!</p>