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

Question

我正在努力解决的确切错误是“对预检请求的响应未通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin” header 。因此，Origin“null”不存在允许访问。”。

我正在尝试使用 JavaScript 从 https://api.kraken.com/0/public/OHLC?pair=ETHEUR 获取 JSON 数据。我创建了一个 XMLHttpRequest 对象来执行此操作，并将 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

在这种情况下，您尝试向其发出跨域请求的服务器不会发送 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响应头是浏览器看到的。

您还可以使用 https://github.com/Rob--W/cors-anywhere/ 轻松设置您自己的 CORS 代理

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

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

详细了解当您使用 XHR 或 JavaScript 库中的 Fetch API 或 AJAX 方法从前端 JavaScript 代码发送跨源请求时浏览器会执行哪些操作，以及有关浏览器必须接收哪些响应 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>