javascript - 尝试将 XMLHttpRequest 发送到 http ://api. lbs.yandex.net/geolocation 时收到错误请求错误 400

Question

我需要向 Yandex 服务器发送 XMLHttpRequest

我收到 Bad Request 错误 (400) 并且:

XMLHttpRequest cannot load http://api.lbs.yandex.net/geolocation. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. The response had HTTP status code 400.

这是我的代码:

var xhr = new XMLHttpRequest();
var url = "http://api.lbs.yandex.net/geolocation";

xhr.open("POST", url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xhr.onreadystatechange = function () {
  <some code>
};

var data = JSON.stringify({
 "common": {
   "version": "1.0",
   "api_key": <here goes API key>
   },
   "gsm_cells": [
   {
   "countrycode": params[0],
   "operatorid": params[1],
   "cellid": params[3],
   "lac": params[2],
   "age": 0
   }
   ]
});

xhr.send(data);

我找不到这么简单(？)的解决方案!

Answer 1

该 API 需要 application/x-www-form-urlencoded 格式的数据，如下所示:

json={"common":{"version":"1.0","api_key":…}…}

也就是说，它需要一个key=value对，字符串json作为键，一些JSON作为值。

但是问题中的代码发送了一些 JSON，但前面没有必要的 json=。因此，API 端点以 400 响应，告诉您这是一个错误的请求。

因此，您可以通过编写代码而不是执行以下操作来解决该问题并获得响应:

var data = 'json=' + JSON.stringify({…});

然而，即使在您这样做之后，您的浏览器仍然不会让您的前端 JavaScript 访问服务器返回的响应。相反，浏览器将记录如下错误消息:

Failed to load https://api.lbs.yandex.net/geolocation: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin https://foo.bar is therefore not allowed access.

...因为 CORS 协议(protocol)要求浏览器禁止前端 JavaScript 代码访问来自跨源请求的响应，除非响应具有 Access-Control-Allow-Origin。

但是您可以通过 CORS 代理发出请求来解决这个问题；完整示例:

var xhr = new XMLHttpRequest();
var proxyurl = "https://cors-anywhere.herokuapp.com/";
var url = "https://api.lbs.yandex.net/geolocation";

xhr.open("POST", proxyurl + url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xhr.onreadystatechange = function() {
  console.log(xhr.responseText)
};

var data = 'json=' + JSON.stringify({
  "common": {
    "version": "1.0",
    "api_key": "AAwkGkwBAAAA9muWLAMAKp9XjTBZtmOLeiBQJqHX6YEqNdUAAAAAAAAAAAAoEP1ZsBlcVFA_OpP55MK3Ek1r8A=="
  },
  "gsm_cells": [{
    "countrycode": 250,
    "operatorid": 99,
    "cellid": 42332,
    "lac": 36002,
    "age": 0
  }]
});
xhr.send(data);

但是请注意，如果您通过这样的第三方代理发送请求，则代理的运营商可能会窥探您的 api_key 和您可能发送的任何其他凭据。

所以你最好使用 https://github.com/Rob--W/cors-anywhere/ 设置你自己的代理

---

就上面示例中的代理如何工作而言:前缀 https://cors-anywhere.herokuapp.com/到您的请求 URL 会导致通过该代理发出请求，然后:

1. 将请求转发给任何https://api.lbs.yandex.net/geolocation .
2. 收到来自 https://api.lbs.yandex.net/geolocation 的回复.
3. 将 Access-Control-Allow-Origin header 添加到响应中。
4. 将该响应和添加的 header 传递回您的请求前端代码。

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

---

另见 https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS