Ajax的跨域请求阻止：同源策略不允许读取远程资源

问题描述：

我正在写一个简单的网站，作为输入一个成语，并从牛津dictionary.Here的我的想法回到它的意义（S）和实例（S）：

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:

我将请求发送到以下网址：

I send a request to the following URL:

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

例如，如果这个成语是不走多远，我将请求发送到：

For example, if the idiom is "not go far", I'll send a request to:

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

我会被重定向到以下页面：

And I'll be redirected to the following page:

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

在此页面中，我可以提取的含义（S）和成语的例子（S）。这是我的code进行测试。它会提醒响应网址：

On this page, I can extract the meaning(s) and the example(s) of the idiom. Here's my code for testing. It will alert the response 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>

问题是我有一个错误：

The problem is I've got an error:

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.

谁能告诉我怎么解决这个吗？另一种方法是也没关系。

Can anybody tell me how to resolve this please? Another approach is fine too

答

JSONP或JSON与填充是在Web浏览器从服务器请求其他域中的数据运行的JavaScript程序中使用的通信技术，一些禁止典型的Web浏览器，因为同源策略的。 JSONP利用了一个事实，即浏览器不强制执行脚本标记的同源策略的优势。请注意，对于JSONP工作，服务器必须知道如何使用JSONP格式的结果回复。 JSONP不使用JSON格式的工作成果。

JSONP or "JSON with padding" is a communication technique used in JavaScript programs running in web browsers to request data from a server in a different domain, something prohibited by typical web browsers because of the same-origin policy. JSONP takes advantage of the fact that browsers do not enforce the same-origin policy on script tags. Note that for JSONP to work, a server must know how to reply with JSONP-formatted results. JSONP does not work with JSON-formatted results.

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

在计算器很好的回答： jQuery的AJAX跨域

Good answer on 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'));
        }
    });

Ajax的跨域请求阻止：同源策略不允许读取远程资源

相关推荐