How to handle CORS policy: No 'Access-Control-Allow-Origin' problem

Question

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?

Does this answer your question? How does Access-Control-Allow-Origin header work? — zero298
Does this answer your question? Access-Control-Allow-Origin error on axios request even after enabling express CORS middleware — ABGR

Abe Petrillo Abe Petrillo · Accepted Answer · 2020-06-18T17:31:37

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

How to handle CORS policy: No 'Access-Control-Allow-Origin' problem

1 Answers