Question

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

我向以下网址发送请求：

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

在这个页面上，我可以提取成语的含义和例子。这是我的测试代码。它会提醒响应网址：

<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”是在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'));
        }
    });

Answer 2

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

您可以使用php函数获取数据，如file_get_contents（）或CURL等。

然后你可以将PHP url与你的ajax代码一起使用。

<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 3

将下方的行放在您通过AJAX调用的文件的顶部。

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

Answer 4

您的网站是否也在oxfordlearnersdictionaries.com域名？或者您尝试拨打域名并且相同的原始政策阻止了您？

除非您有权通过oxfordlearnersdictionaries.com域上的CORS设置标头，否则您可能希望寻找其他方法。

Answer 5

将以下代码添加到您的.htaccess中

标头设置访问控制允许来源*

对我有用。

谢谢

Answer 6

当我在asp.net Mvc webApi上工作时遇到了相同的问题，因为未启用cors。我通过在webApiconfig的内部注册方法中启用cors解决了此问题

首先从here安装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 }
        );
    }

Answer 7

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

标头集访问控制允许来源“ *”

Answer 8

这也需要。

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

Answer 9

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

因此，似乎正在调用的远程脚本中不能包含错误。

Answer 10

我认为将标头设置为Tabele CableConnection Id CableNumber DeviceFrom DeviceTo Table DeviceServer Id DeviceName Interface ... ... Table DeviceSwitch Id DeviceName Module ... ...可以解决问题。遇到同样的问题，我就这样解决了。

Answer 11

将这些添加到您的ajax网址调用所在的php文件中

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");

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

11 个答案: