CORS error when using search API

[Merdin]

Can someone tell if I'm doing something wrong here?

function submitSearchForm() {
  let url = 'https://nominatim.openstreetmap.org/search?'
  url += 'city=' + search.city
  url += '&country=' + search.country

  axios
    .get(url)
    .then((response) => {
      console.log(response)
    })
    .catch((error) => {
      console.log(error)
    })
}

Response:
Access to XMLHttpRequest at 'https://nominatim.openstreetmap.org/search?city=london&country=england' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

{
    "message": "Network Error",
    "name": "AxiosError",
    "stack": "AxiosError: Network Error\n    at XMLHttpRequest.handleError (http://localhost:5173/node_modules/.vite/deps/axios.js?v=ca03f9b7:1623:14)\n    at Axios.request (http://localhost:5173/node_modules/.vite/deps/axios.js?v=ca03f9b7:2145:41)",
    "config": {
        "transitional": {
            "silentJSONParsing": true,
            "forcedJSONParsing": true,
            "clarifyTimeoutError": false
        },
        "adapter": [
            "xhr",
            "http",
            "fetch"
        ],
        "transformRequest": [
            null
        ],
        "transformResponse": [
            null
        ],
        "timeout": 0,
        "xsrfCookieName": "XSRF-TOKEN",
        "xsrfHeaderName": "X-XSRF-TOKEN",
        "maxContentLength": -1,
        "maxBodyLength": -1,
        "env": {},
        "headers": {
            "Accept": "application/json, text/plain, */*"
        },
        "method": "get",
        "url": "https://nominatim.openstreetmap.org/search?city=london england&country=null"
    },
    "code": "ERR_NETWORK"
}

GET https://nominatim.openstreetmap.org/search?city=london%20england&country=null net::ERR_FAILED 302 (Found)

[lonvia]

There are a couple of issues here:

First of all, you are asking for a result in HTML format which gets you a forward to the Nominatim UI in return. That does intentionally not come with CORS headers. Have a look at the format parameter.

When fixed, it will still not work because you do not send a custom user agent as required by our usage policy. Axios is one of the libraries that is currently blocked with the generic user agent.

Finally, it looks like you are not properly sanitizing your data before sending the request. The URL contains a parameter country=null. There will be no results for that.