请求的资源错误中不存在“Access-Control-Allow-Origin”标头

IT技术 javascript jquery json ajax cors
2021-01-16 05:27:03

我正在尝试获取新闻网站的提要。以为我会使用谷歌的提要 API 将提要燃烧器提要转换为 json。以下 url 将从提要中以 json 格式返回 10 个帖子。http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http://feeds.feedburner.com/mathrubhumi

我使用以下代码来获取上述网址的内容

$.ajax({
  type: "GET",
  dataType: "jsonp",
  url: "http://ajax.googleapis.com/ajax/services/feed/load",
  data: {
    "v": "1.0",
    "num": "10",
    "q": "http://feeds.feedburner.com/mathrubhumi"
  },
  success: function(result) {
    //.....
  }
});

但它不起作用，我收到以下错误

XMLHttpRequest 无法加载 http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http%3A%2F%2Ffeeds.feedburner.com%2Fmathrubhumi。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问Origin ' http://localhost '。

我该如何解决？

6个回答

如果您使用 Google Chrome 浏览器，则可以使用扩展程序进行破解。

您可以找到一个Chrome 扩展程序，它可以在您的应用程序中动态修改 CORS 标头。显然，这仅适用于 Chrome，但我喜欢它可以在任何地方进行零更改。

您可以使用它在本地机器上调试您的应用程序（如果一切正常）。

注意：如果 URL 损坏，扩展名是Access-Control-Allow-Origin: *。我建议您在不处理内容时禁用此扩展程序，因为例如，youtube 不支持此扩展程序。

这对我也确实有用！...我认为插件的开发人员已经更新了它以适应您手动输入的某些网址，而不是为所有内容工作，我访问了 Youtube 和其他网站，它工作得很好。总之非常感谢。
2021-03-14 05:27:03
看起来那个扩展不再可用，至少在那个 URL 上是这样。但是，此扩展程序似乎有效：chrome.google.com/webstore/detail/allow-cors-access-control/...
2021-03-21 05:27:03
但是这个扩展在做什么？您是否知道开源版本或如何编写以这种方式修改标头的版本？您可能不想（好吧，好吧，我不想）运行一个扩展程序，它可以在不知道它在做什么的情况下完全访问 URL 和数据。如果扩展易手，这似乎是一个非常糟糕的主意，已经是邪恶的，等等。编辑： 下面提到的那个是开源的，fwiw。
2021-03-28 05:27:03
它仅用于在开发时进行测试。用户不会在浏览器中添加插件
2021-03-29 05:27:03
@ruffin 感谢您指出这一点！此外，值得一提的是，这个开源 Chrome 插件 CORS Unblock 也可以在 Firefox 和 Microsoft Edge 上使用。
2021-04-04 05:27:03

我相信这可能是 Chrome 不支持localhost通过Access-Control-Allow-Origin--参见 Chrome 问题

要让 Chrome 发送Access-Control-Allow-Origin标头，只需将 /etc/hosts 文件中的 localhost 别名为其他域，例如：

127.0.0.1   localhost yourdomain.com

然后，如果您使用yourdomain.com而不是访问您的脚本localhost，则调用应该会成功。

这里也没有帮助。我的网站已经这样设置了，但是我确实有一个很大的不同。我正在使用不同的端口。我敢肯定，如果它是同一个端口，它会起作用。HTTP 与 HTTPS 当然是不同的端口，所以这可能会导致一些问题。我的不是 HTTPS，但我正在尝试访问同一域上的某些内容，但不是 80 端口。
2021-03-21 05:27:03
谢谢你。我遇到了这个问题并切换到 IE 边缘，导致我看到我的服务器代码中的潜在错误，它被 Chrome 拒绝 localhost 所掩盖。
2021-03-22 05:27:03
对我也不起作用。也许 Chrome 的更新阻止了这个“漏洞”？
2021-03-27 05:27:03
如果 chrome 扩展程序正在访问 API，该怎么办
2021-03-29 05:27:03

试试这个 - 通过如下设置标题来设置 Ajax 调用：

var uri = "http://localhost:50869/odata/mydatafeeds"
$.ajax({
    url: uri,
    beforeSend: function (request) {
        request.setRequestHeader("Authorization", "Negotiate");
    },
    async: true,
    success: function (data) {
        alert(JSON.stringify(data));
    },
    error: function (xhr, textStatus, errorMessage) {
        alert(errorMessage);
    }                
});

然后通过使用以下命令行打开 Chrome 来运行您的代码：

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

cors unblock 适用于 chrome 78 [COrs unb] [1] https://chrome.google.com/webstore/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino

这是一个名为“cors unblock”的谷歌浏览器插件

摘要： 通过在启用时将“Access-Control-Allow-Origin: *”标头附加到本地和远程 Web 请求，不再出现 CORS 错误

此扩展通过为浏览器接收的每个请求提供自定义的“access-control-allow-origin”和“access-control-allow-methods”标头来提供对 XMLHttpRequest 和 fetch 方法的控制。用户可以从工具栏按钮打开和关闭扩展。要修改这些标题的更改方式，请使用右键单击上下文菜单项。您可以自定义允许使用的方法。默认选项是允许 'GET'、'PUT'、'POST'、'DELETE'、'HEAD'、'OPTIONS'、'PATCH' 方法。您还可以要求扩展程序在服务器已经填充这些标头时不要覆盖它们。

这是一个很棒的 Web 开发扩展！非常感谢你！！:)
2021-03-21 05:27:03
正如上面另一位评论者所指出的，这个插件是开源的，考虑到这种插件可以访问所有 URL，这非常好，所以透明度值得赞赏。它也可在 Firefox 和 Microsoft Edge 上使用。不错的发现！感谢你的分享！
2021-04-03 05:27:03
欢迎:) @ScottMilella
2021-04-09 05:27:03

仅供参考，我从 jQuery 文档中注意到了这个信息，我认为它适用于这个问题：

由于浏览器安全限制，大多数“Ajax”请求都遵循同源策略；请求无法从不同的域、子域、端口或协议成功检索数据。

像@thanix 这样更改主机文件对我不起作用，但@dkruchok 提到的扩展名确实解决了问题。

其它你可能感兴趣的问题
上一篇如何防止 Unicode 字符从 JavaScript 呈现为 HTML 中的表情符号？ 下一篇使用 JavaScript 对 HTML 表格进行排序