title: No 'Access-Control-Allow-Origin' header is present on the requested resource in ajax on JavaScript
body: <p>I am currently working on a <code>spring project</code>, and I am designating <code>uri</code> using a page controller.
   We need to use <code>uri short API</code> now. There is a problem. The way that we're doing it is <code>PHP</code>. But I have to use the code in <code>JavaScript</code>. </p>
  
  <p>I tried this code.</p>
  
  <pre class="lang-js prettyprint-override"><code>    data = {};
      data.key = "ehelkhej45jjb38h6f5234234hg";
      data.short = "www.google.com";
      data.name = "googleuri"
  
      $.ajax({
          url : "https://cutt.ly/api/api.php",
          type : "POST",
          dataType : "json",
          beforeSend : function(xhr){
              xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
              xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
          },
          data : data,
          success : function(result) {
              console.log(result);
          }
      });
  </code></pre>
  
  <p>This has caused me an error.</p>
  
  <blockquote>
    <p>Access to XMLHttpRequest at '<a href="https://cutt.ly/api/api.php" rel="nofollow noreferrer">https://cutt.ly/api/api.php</a>' from origin
    '<a href="http://localhost:11000" rel="nofollow noreferrer">http://localhost:11000</a>' has been blocked by CORS policy: Response to
    preflight request doesn't pass access control check: No
    'Access-Control-Allow-Origin' header is present on the requested
    resource. jquery-1.9.1.js:8526 POST <a href="https://cutt.ly/api/api.php" rel="nofollow noreferrer">https://cutt.ly/api/api.php</a>
    net::ERR_FAILED</p>
  </blockquote>
  
  <p>I could tried <code>Postman</code></p>
  
  <p><a href="https://i.stack.imgur.com/98F9o.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/98F9o.png" alt="postman"></a></p>
  
  <p>When I first called this, the <code>body</code> was empty and <code>status : 500Internal Server Error</code>. But when I call again, I get a <code>response</code> like a picture.</p>
  
  <p>And I could tried <code>GET</code> and <code>jsonp</code> but it was Blocked</p>
  
  <pre class="lang-js prettyprint-override"><code>    $.ajax({
          url : "https://cutt.ly/api/api.php",
          type : "GET",
          dataType : "jsonp",
          data : data,
          success : function(result) {
              console.log(result);
          }
      });
  </code></pre>
  
  <p><strong>Block ERROR</strong></p>
  
  <blockquote>
    <p>jquery-1.9.1.js:8336 Cross-Origin Read Blocking (CORB) blocked
    cross-origin response
    <a href="https://cutt.ly/api/api.php?callback=jQuery191049576531804679713_1565245716711&amp;key=ehelkhej45jjb38h6f5234234hg&amp;short=www.google.com&amp;name=googleuri&amp;_=1565245716712" rel="nofollow noreferrer">https://cutt.ly/api/api.php?callback=jQuery191049576531804679713_1565245716711&amp;key=ehelkhej45jjb38h6f5234234hg&amp;short=www.google.com&amp;name=googleuri&amp;_=1565245716712</a>
    with MIME type text/html. See
    <a href="https://www.chromestatus.com/feature/5629709824032768" rel="nofollow noreferrer">https://www.chromestatus.com/feature/5629709824032768</a> for more
    details.</p>
  </blockquote>
  
  <p>What I've tried. It was worked. But it is error</p>
  
  <blockquote>
    <p>GET
    <a href="http://cors-anywhere.herokuapp.com/https://cutt.ly/api/api.php?key=ehelkhej45jjb38h6f5234234hg&amp;short=redisgate.kr&amp;name=redisgate" rel="nofollow noreferrer">http://cors-anywhere.herokuapp.com/https://cutt.ly/api/api.php?key=ehelkhej45jjb38h6f5234234hg&amp;short=redisgate.kr&amp;name=redisgate</a>
    500 (Internal Server Error)</p>
  </blockquote>
  
  <pre class="lang-js prettyprint-override"><code>var options = "https://cutt.ly/api/api.php?key=ehelkhej45jjb38h6f5234234hg&amp;short=www.google.com&amp;name=googleuri"
  
  
  $.ajaxPrefilter( function (options) {
          if (options.crossDomain &amp;&amp; jQuery.support.cors) {
            var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
            options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
            }
          });
  
  $.get(
      options,
           function (response) {
               console.log("&gt; ", response);
  });
  </code></pre>
  
  <p><a href="https://cutt.ly/cuttly-api" rel="nofollow noreferrer">This link</a> is the link that has API usage. How can you solve this problem?</p>