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

【问题标题】：Ajax Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resourceAjax 跨域请求被阻止：同源策略不允许读取远程资源
【发布时间】：2014-07-20 12:39:19
【问题描述】：

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

我向以下 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 来解决。

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

【问题讨论】：

你可以试试这个 - stackoverflow.com/questions/22363268/…
谢谢，但oxfordlearnersdictionaries.com 不是我的
html5rocks.com/en/tutorials/cors
你到底做了什么来让它工作？

标签： jquery ajax cross-domain

【解决方案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'));
        }
    });

【讨论】：

jsonp 不应该被鼓励，因为它容易受到跨站点攻击。现在任何实现 jsonp 的服务器都是不使用 CORS 标头的傻瓜
这对我不起作用。这段代码没有收到 CORS 错误，而是给了我一个 401 未经授权的错误。

【解决方案2】：

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

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

【讨论】：

这有效，但 .htaccess 中的标准 CORS 指令无效。我的情况是 AJAX 调用是在一个网站上发布到同一域上的另一个路径。万一有人遇到同样的问题（Litespeed，PHP 7）。
如何在js文件中添加这个？

【解决方案3】：

没有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/");
?>

【讨论】：

【解决方案4】：

您的网站是否也在 oxfordlearnersdictionaries.com 域中？或者您尝试调用域并且同源策略阻止了您？

除非您有权在 oxfordlearnersdictionaries.com 域上通过 CORS 设置标题，否则您可能需要寻找其他方法。

【讨论】：

我的网站与 oxfordlearnersdictionaries.com 不在同一个域中，但我不知道有什么方法可以从该网站获取数据
那么它真的不可能 - 如果您不在同一个域中并且您无法设置网络服务器标头/CORS，则有一些解决方法/黑客请参阅此处以获取示例iframe x-domain

【解决方案5】：

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

标头集 Access-Control-Allow-Origin *

它对我有用。

谢谢

【讨论】：

【解决方案6】：

将这些添加到您的 ajax url 调用的 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");

【讨论】：

【解决方案7】：

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

标头集 Access-Control-Allow-Origin "*"

【讨论】：

【解决方案8】：

我在使用 asp.net Mvc webApi 时遇到了同样的问题，因为没有启用 cors。我通过在 webApiconfig 的 register 方法中启用 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 }
        );
    }

【讨论】：

【解决方案9】：

这个也需要。

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

【讨论】：

【解决方案10】：

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

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

【讨论】：

【解决方案11】：

我认为将您的标题设置为Access-Control-Allow-Origin: * 可以解决问题。有同样的问题，我就这样解决了。

【讨论】：