Ajax跨域请求阻塞:同源策略不允许读取远程资源

Question

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

我向以下URL发送请求:

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

例如，如果习语是"不走远"，我将发送请求到:

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>

问题是我有一个错误:

跨域请求阻塞:同源策略不允许读取远程资源http://www.oxfordlearnersdictionaries.com/search/english/direct/?q=by+far。这可以通过将资源移动到相同的域或启用CORS来解决。

谁能告诉我怎么解决这个问题?
另一种方法也可以。

Answer 1

JSONP或JSON with padding"是在web浏览器中运行的JavaScript程序中使用的一种通信技术，用于从不同域的服务器请求数据，这是典型的web浏览器由于同源策略而禁止的。JSONP利用了浏览器不会对脚本标记强制执行同源策略这一事实。请注意，要使JSONP工作，服务器必须知道如何使用JSONP格式的结果进行应答。JSONP不能处理json格式的结果。

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

关于StackOverflow的好答案:jQuery AJAX跨域

$.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'));
  }
});

Answer 2

放置在您通过AJAX调用的文件顶部的下一行

header("Access-Control-Allow-Origin: *");

Answer 3

没有jsonp我们无法从第三方网站获取数据。

您可以使用php函数获取数据，如file_get_contents()或CURL等

然后你可以在ajax代码中使用PHP 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: 'get_data.php',
            data:{q:idiom},
            async:true,
            crossDomain:true,
            success: function(data, status, xhr) {
                alert(xhr.getResponseHeader('Location'));
            }
        });
    });
});
</script>

创建一个PHP文件= get_data.php

<?php
  echo file_get_contents("http://www.oxfordlearnersdictionaries.com/search/english/direct/");
?>

Answer 4

你的网站也在oxfordlearnersdictionaries.com域名上吗?或者您试图呼叫一个域，但同源策略阻止了您?

除非你有权限通过CORS在oxfordlearnersdictionaries.com域名设置标题，否则你可能需要寻找另一种方法。

Answer 5

将这些添加到PHP文件中，您的ajax url调用

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Credentials: true ");
header("Access-Control-Allow-Methods: OPTIONS, GET, POST");
header("Access-Control-Allow-Headers: Content-Type, Depth, User-Agent, X-File-Size, X-Requested-With, If-Modified-Since, X-File-Name, Cache-Control");

Answer 6

将以下代码添加到您的。htaccess

报头集Access-Control-Allow-Origin *

它适合我。

谢谢

Answer 7

如果您的网站也属于oxfordlearnersdictionaries.com域名，请在oxfordlearnersdictionaries.com .htaccess文件中使用以下内容:

<IfModule mod_headers.c>
  Header set Access-Control-Allow-Origin "*"
</IfModule>

Answer 8

我使用了header("Access-Control-Allow-Origin: *");方法，但仍然收到CORS错误。事实证明，所请求的PHP脚本中有一个错误(我忘记在连接两个变量时添加句点(.))。一旦我改正了这个错字，它就起作用了!

所以，似乎被调用的远程脚本不能有错误。

Answer 9

这也需要。

<?php
header("Access-Control-Allow-Origin: *");

Answer 10

我认为将标题设置为Access-Control-Allow-Origin: *会在这里做到这一点。有同样的问题，我就这样解决了

Answer 11

当我在asp.net Mvc webApi上工作时，因为没有启用cors，我也遇到了同样的问题。我通过启用webApiconfig

的cors内注册方法来解决这个问题

首先，从这里安装cors

public static void Register(HttpConfiguration config)
{
  // Web API configuration and services
  var cors = new EnableCorsAttribute("*", "*", "*");
  config.EnableCors(cors);
  config.EnableCors();
  // Web API routes
  config.MapHttpAttributeRoutes();
  config.Routes.MapHttpRoute(
    name: "DefaultApi",
    routeTemplate: "api/{controller}/{id}",
    defaults: new { id = RouteParameter.Optional }
  );
}