I need to send XMLHttpRequest to the Yandex server

I get the Bad Request error (400) and:

XMLHttpRequest cannot load . 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.

Here is my code:

var xhr = new XMLHttpRequest();
var url = "";

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

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

var data = JSON.stringify({
 "mon": {
   "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);

I can't find the solution for such a simple(?) thing!

I need to send XMLHttpRequest to the Yandex server

I get the Bad Request error (400) and:

XMLHttpRequest cannot load http://api.lbs.yandex/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.

Here is my code:

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

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

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

var data = JSON.stringify({
 "mon": {
   "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);

I can't find the solution for such a simple(?) thing!

• javascript
• cors
• geolocation
• xmlhttprequest
• yandex

Share Improve this question Follow edited Jun 22, 2019 at 9:10 sideshowbarker♦ 88.6k3030 gold badges215215 silver badges212212 bronze badges asked Aug 24, 2017 at 1:33 Maria ChibelMaria Chibel 3111 silver badge33 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

That API expects application/x-www-form-urlencoded-formatted data that looks like this:

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

That is, it needs a key=value pair, with the string json as the key and some JSON as the value.

But the code in the question is sending some JSON without the necessary json= preceding it. So the API endpoint responds with a 400 to tell you it’s a bad request.

So you can fix that and get a response back by making your code instead do this:

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

However, even after you do that, your browser’s still not going to let your frontend JavaScript access the response the server returns. Instead the browser will log an error message like this:

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

…because the CORS protocol requires browsers to disallow frontend JavaScript code access to responses from cross-origin requests unless the response has Access-Control-Allow-Origin.

But you can get around that by making the request through a CORS proxy; plete example:

var xhr = new XMLHttpRequest();
var proxyurl = "https://cors-anywhere.herokuapp./";
var url = "https://api.lbs.yandex/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({
  "mon": {
    "version": "1.0",
    "api_key": "AAwkGkwBAAAA9muWLAMAKp9XjTBZtmOLeiBQJqHX6YEqNdUAAAAAAAAAAAAoEP1ZsBlcVFA_OpP55MK3Ek1r8A=="
  },
  "gsm_cells": [{
    "countrycode": 250,
    "operatorid": 99,
    "cellid": 42332,
    "lac": 36002,
    "age": 0
  }]
});
xhr.send(data);

Note however that if you send the request through a third-party proxy like that, the operator of the proxy can potentially snoop on your api_key and any other credentials you might send.

So you’re better off setting up your own proxy using https://github./Rob--W/cors-anywhere/

---

As far as how the proxy in example above works: Prefixing https://cors-anywhere.herokuapp./ to your request URL causes the request to get made through that proxy, which then:

1. Forwards the request to whatever https://api.lbs.yandex/geolocation.
2. Receives the response from https://api.lbs.yandex/geolocation.
3. Adds the Access-Control-Allow-Origin header to the response.
4. Passes that response, with that added header, back to your requesting frontend code.

The browser will then allow your frontend code to access the response, because that response with the Access-Control-Allow-Origin response header is what the browser sees.

---

See also https://developer.mozilla/en-US/docs/Web/HTTP/Access_control_CORS

Suggested sulution will not work correctly in mon case, but works correctly for gcm cell. It's because yandex/geolocation service used to getting location of user based on WiFi network, gcm cell or ip address.

When need use only IP based way then required configuration CORS on your web server.