Question

我无法从Rescue Time API检索数据。我正在使用jQuery get（）方法在JavaScript文件中发出请求。以下是与API GET请求相关的JavaScript：

input {
  margin: 10px;
  direction: rtl;
}

“key = ########################”是包含我的API密钥的参数。

运行脚本时（本地或我的个人域名），我收到一个跨源错误：

XMLHttpRequest无法加载https://www.rescuetime.com/anapi/data?key=########################&format=json&restrict_kind=overview。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许原点'null'访问。

我理解这种情况正在发生，因为我正在请求与发出AJAX请求的域不同的域中的内容。话虽这么说，我该如何解决这个问题？我已阅读CORS MDN documentation，但无法解码我需要遵循哪些可操作的步骤才能解决此问题。

我需要一些可操作的步骤。

Answer 1

使用https://github.com/Rob--W/cors-anywhere/或类似的代码设置CORS代理。

https://cors-anywhere.herokuapp.com/是运行该代码的公共实例，您可以使用它的方法是将现有代码更改为：

$.get('https://cors-anywhere.herokuapp.com/https://www.rescuetime.com/anapi/data?key=########################&format=json&restrict_kind=overview', function(data) {
  // callback function code...
});

请注意，如果您这样做，您的密钥可能会暴露给该https://cors-anywhere.herokuapp.com/实例的运营商。因此，如果这是一个问题，请不要尝试，而是在https://some.url.for.your.proxy设置您自己的代理，并将您的代码更改为：

$.get('https://some.url.for.your.proxy/https://www.rescuetime.com/anapi/data?key=########################&format=json&restrict_kind=overview', function(data) {
  // callback function code...
});

无论哪种方式，结果都是您的请求通过指定的CORS代理发送，该代理将请求转发到https://www.rescuetime.com/anapi/data…端点，然后接收响应。然后，代理后端将Access-Control-Allow-Origin标头添加到响应中，最后将其传递回请求的前端代码。

然后，您的浏览器允许您的前端代码访问响应，因为具有Access-Control-Allow-Origin响应标头的响应是浏览器看到的响应。否则，如果响应缺少Access-Control-Allow-Origin，则浏览器不会让您的代码访问它。

如果您想从浏览器中运行的前端JavaScript代码发出请求，并希望使用该前端代码的响应，那么这样的CORS代理就是唯一的选择。否则，如果不使用此类代理，浏览器将阻止您的代码访问响应 - 因为https://www.rescuetime.com/anapi/data… API端点本身不会发送必要的Access-Control-Allow-Origin响应标头。

除此之外，您唯一的另一个选择是不从您的前端代码发出请求，而是从您正在运行的任何后端服务器端代码发出请求。在这种情况下，中间没有浏览器对请求强制执行跨源限制。

访问API时出现“Access-Control-Allow-Origin”请求错误

1 个答案: