title: Ajax Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource
body: <p>I'm writing a simple site that takes as input an idiom, and return its meaning(s) and example(s) from Oxford Dictionary. Here's my idea:</p>
  <p>I send a request to the following URL:</p>
  <pre class="lang-none prettyprint-override"><code>http://www.oxfordlearnersdictionaries.com/search/english/direct/?q=[idiom]
  </code></pre>
  <p>For example, if the idiom is “not go far”, I'll send a request to:</p>
  <pre class="lang-none prettyprint-override"><code>http://www.oxfordlearnersdictionaries.com/search/english/direct/?q=not+go+far
  </code></pre>
  <p>And I'll be redirected to the following page:</p>
  <pre class="lang-none prettyprint-override"><code>http://www.oxfordlearnersdictionaries.com/definition/english/far_1#far_1__192
  </code></pre>
  <p>On this page, I can extract the meaning(s) and the example(s) of the idiom. <br />
  Here's my code for testing. It will alert the response URL:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;input id=&quot;idiom&quot; type=&quot;text&quot; name=&quot;&quot; value=&quot;&quot; placeholder=&quot;Enter your idiom here&quot;&gt;
  &lt;br&gt;
  &lt;button id=&quot;submit&quot; type=&quot;&quot;&gt;Submit&lt;/button&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
  $(document).ready(function(){
      $(&quot;#submit&quot;).bind('click',function(){
          var idiom=$(&quot;#idiom&quot;).val();
          $.ajax({
              type: &quot;GET&quot;,
              url: 'http://www.oxfordlearnersdictionaries.com/search/english/direct/',
              data:{q:idiom},
              async:true,
              crossDomain:true,
              success: function(data, status, xhr) {
                  alert(xhr.getResponseHeader('Location'));
              }
          });
          
      });
  });
  &lt;/script&gt;
  </code></pre>
  <p>The problem is I've got an error:</p>
  <blockquote>
  <p>Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at <a href="http://www.oxfordlearnersdictionaries.com/search/english/direct/?q=by+far" rel="noreferrer">http://www.oxfordlearnersdictionaries.com/search/english/direct/?q=by+far</a>. This can be fixed by moving the resource to the same domain or enabling CORS.</p>
  </blockquote>
  <p>Can anybody tell me how to resolve this please? <br />
  Another approach is fine too.</p>