jquery - Ajax跨源请求被阻止: The Same Origin Policy disallows reading the remote resource

Question

我正在编写一个简单的网站，它以习语作为输入，并从牛津词典返回其含义和示例。这是我的想法:

我向以下 URL 发送请求:

http://www.oxfordlearnersdictionaries.com/search/english/direct/?q=[idiom]

例如，如果成语是“not go far”，我将向以下地址发送请求:

http://www.oxfordlearnersdictionaries.com/search/english/direct/?q=not+go+far

我将被重定向到以下页面:

http://www.oxfordlearnersdictionaries.com/definition/english/far_1#far_1__192

在这个页面上，我可以提取该成语的含义和示例。
这是我的测试代码。它将提醒响应 URL:

<input id="idiom" type="text" name="" value="" placeholder="Enter your idiom here">
<br>
<button id="submit" type="">Submit</button>
<script type="text/javascript">
$(document).ready(function(){
    $("#submit").bind('click',function(){
        var idiom=$("#idiom").val();
        $.ajax({
            type: "GET",
            url: 'http://www.oxfordlearnersdictionaries.com/search/english/direct/',
            data:{q:idiom},
            async:true,
            crossDomain:true,
            success: function(data, status, xhr) {
                alert(xhr.getResponseHeader('Location'));
            }
        });
        
    });
});
</script>

问题是我遇到了一个错误:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://www.oxfordlearnersdictionaries.com/search/english/direct/?q=by+far. This can be fixed by moving the resource to the same domain or enabling CORS.

谁能告诉我如何解决这个问题吗？
另一种方法也很好。

Answer 1

JSONP 或“带填充的 JSON”是一种在 Web 浏览器中运行的 JavaScript 程序中使用的通信技术，用于从不同域中的服务器请求数据，但由于同源策略，典型的 Web 浏览器禁止这样做。 JSONP 利用了浏览器不对脚本标签强制执行同源策略的事实。请注意，要使 JSONP 正常工作，服务器必须知道如何使用 JSONP 格式的结果进行回复。 JSONP 不适用于 JSON 格式的结果。

http://en.wikipedia.org/wiki/JSONP

StackOverflow 上的好答案:jQuery AJAX cross domain

$.ajax({
  type: "GET",
  url: 'http://www.oxfordlearnersdictionaries.com/search/english/direct/',
  data:{q:idiom},
  async:true,
  dataType : 'jsonp',   //you may use jsonp for cross origin request
  crossDomain:true,
  success: function(data, status, xhr) {
    alert(xhr.getResponseHeader('Location'));
  }
});