No 'Access-Control-Allow-Origin' header

[axel.hennig]

Hi everybody,

I'm currently trying to build an app where I want to make an API-call to a free API. I get the following response and don't know how to solve it:

Access to fetch at 'https://api.opentopodata.org/v1/ned10m,eudem25m,mapzen,aster30m?locations=HIDDEN_LAT,HIDDEN_LON'; from origin 'http://127.0.0.1:50519' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I was also using

Code Select Expand

fetch(stringToFetch, {mode:'no-cors'})
but this didn't help. The response was:

Code Select Expand

Response {type: 'opaque', url: '', redirected: false, status: 0, ok: false, ...}
body: (...)
bodyUsed: false
headers: Headers {}
ok: false
redirected: false
status: 0
statusText: ""
type: "opaque"
url: ""
[[Prototype]]: Response

Does anybody know WHAT happened and HOW to solve it?

Thanks,
Axel

[David_H]

Does anybody know WHAT happened and HOW to solve it?

Thanks,
Axel

You're not on the allowed list. You have to proxy the request yourself (bypassing cors, which is a browser security restriction) or be added to the whitelist.

Enabling CORS on api.opentopodata.org · Issue #53 · ajnisbet/opentopodata · GitHub

[axel.hennig]

Hi David,

thanks for your answer.

I've read the GitHub-post (not sure if I really fully understood it). Combining your post with the GitHub one would lead me to:

proxy the request by myself (your post) by my own server (GitHub-post)

I don't have an own server. Does this mean that I'm done here and I cannot solve this problem or can I use a public proxy-server somehow?

[Mario]

This is a browser security feature.
By default, a browser does not allow JavaScript to access domains "outside" the current domain.
If you load a web page from www.example.com, JavaScript can only access the domain www.example.com.

In your case, your code is running on 127.0.0.1 and you are trying to access the domain " https://api.opentopodata.org ".
By default such requests are blocked unless the other site (https://api.opentopodata.org) returns a CORS header that is permissive like Access-Control-Allow-Origin: *
The opentopodata does not return this header and hence the browser blocks the request. There is no work-around. The access is controlled by the other server, not your browser.

You can host your own copy of opentopodata on your own server as suggested in the GitHub entry. In that case, the opentopodata runs on the "same" server as your JavaScript code that wants to fetch data.
Or fetch the data by other means, e.g. using curl on the command line. curl does not have the same CORS policy as web browsers and will access the API data just fine.