对预检请求的响应未通过访问控制检查错误

Question

我遇到的确切错误是 "Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access."。

我正在尝试使用 https://api.kraken.com/0/public/OHLC?pair=ETHEUR 从 https://api.kraken.com/0/public/OHLC?pair=ETHEUR 获取 JSON 数据。我创建了一个 XMLHttpRequest object 来执行此操作，并将 GET 指定为请求类型。这应该是一个简单的请求，但错误表明已发送预检请求。这种行为的原因是什么？也就是说，为了修复此错误，我尝试设置一个请求 header，其中我将“*”指定为 Access-Control-Allow-Origin 的值，但我仍然收到错误。我已经查看了对与我类似的问题的答复，但无法弄清楚如何解决我正在处理的问题。这可能是因为 JavaScript 还很陌生。无论哪种方式，下面是我编写的代码：

    var requestURL = 'https://api.kraken.com/0/public/OHLC?pair=ETHEUR'

    var request = new XMLHttpRequest();
    request.open('GET',requestURL,true);
    request.responseType = 'json';

    request.onload = function(){ 
        var data = request.response; 
        console.log(data); 
    }


    request.setRequestHeader('Access-Control-Allow-Origin','*');

    request.send();

Answer 1

在这种情况下，您尝试向其发出 cross-origin 请求的服务器未发送 Access-Control-Allow-Origin 响应 header，这是您唯一的选择，如果您愿意在浏览器中从前端 JavaScript 代码运行向该服务器发出请求，就是使用 CORS 代理。否则，您的浏览器将不允许您的前端 JavaScript 代码访问响应。

因此，如果您将代码更改为如下内容，则可以使您的请求成功：

var proxyURL = 'https://cors-anywhere.herokuapp.com';
var requestURL = 'https://api.kraken.com/0/public/OHLC?pair=ETHEUR';
var request = new XMLHttpRequest();
request.open('GET', proxyURL + '/' + requestURL, true);

通过https://cors-anywhere.herokuapp.com发送请求，后者将请求转发给https://api.kraken.com/0/public/OHLC?pair=ETHEUR，然后接收响应。 https://cors-anywhere.herokuapp.com 后端将 Access-Control-Allow-Origin header 添加到响应并将其传递回您的请求前端代码。

然后浏览器将允许您的前端代码访问响应，因为带有 Access-Control-Allow-Origin 响应 header 的响应是浏览器所看到的。

您还可以使用 https://github.com/Rob--W/cors-anywhere/

轻松设置自己的 CORS 代理

另请注意，request.setRequestHeader('Access-Control-Allow-Origin','*') 需要从您发出请求的前端代码中删除（如上面评论中所述）。

那是因为 Access-Control-Allow-Origin 严格来说是响应 header 服务器发送响应；在请求中从客户端发送它除了触发您的浏览器执行不必要的 CORS preflight OPTIONS request 之外没有任何效果，这将失败。

有关当您使用 XHR 或 [=56= 中的 Fetch API 或 AJAX 方法从前端 JavaScript 代码发送 cross-origin 请求时浏览器执行的操作的详细信息] 库——以及关于必须接收什么响应 header 以便浏览器允许前端代码访问响应的详细信息——参见 https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS.

var proxyURL = 'https://cors-anywhere.herokuapp.com';
var requestURL = 'https://api.kraken.com/0/public/OHLC?pair=ETHEUR';

var request = new XMLHttpRequest();
request.open('GET', proxyURL + '/' + requestURL, true);
request.responseType = 'json';

request.onload = function() {
  var data = request.response;
  document.querySelector('pre').textContent = JSON.stringify(data, null, 2);
}

request.send();

<pre></pre>

对预检请求的响应未通过访问控制检查错误

Response to preflight request doesn't pass access control check error

javascript

xmlhttprequest

cors

preflight