0

for a white i am working an api problem but always face this problem and cant find any solution. Here is my ajax request

$(document).ready(function() {

   var url = 'https://www.xeno-canto.org/api/2/recordings?query=bearded+bellbird';
            $.ajax({
                url: url,
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                type: "GET",

                dataType: "json",
                data: {},
                success: function(result) {
                    console.log(result);
                },
                error: function() {
                    console.log("error");
                }
            });

        });

but in chrome console this result show up

Access to XMLHttpRequest at 'https://www.xeno-canto.org/api/2/recordings?query=Greater+Scaup' from origin 'https://www.birdpx.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Do you have any solition?

Onur ÇİÇEK
  • 11
  • 1
  • Does this answer your question? [How does Access-Control-Allow-Origin header work?](https://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work) – zero298 Jun 18 '20 at 17:18
  • See this : https://stackoverflow.com/a/62116593/4650975 – ABGR Jun 18 '20 at 17:33
  • Does this answer your question? [Access-Control-Allow-Origin error on axios request even after enabling express CORS middleware](https://stackoverflow.com/questions/62116134/access-control-allow-origin-error-on-axios-request-even-after-enabling-express-c) – ABGR Jun 18 '20 at 17:33

1 Answers1

0

The only way around this is to use a proxy. The proxy can retrieve the content outside of a browser and deliver it to your client. This is a common problem and there are many options such as:

https://github.com/Shivam010/bypass-cors

Abe Petrillo
  • 2,368
  • 23
  • 34