如何处理 CORS 策略：没有“Access-Control-Allow-Origin”问题

Posted 2023-05-08

【中文标题】如何处理 CORS 策略：没有“Access-Control-Allow-Origin”问题

【英文标题】：How to handle CORS policy: No 'Access-Control-Allow-Origin' problem

【发布时间】：2020-10-08 20:20:06

【问题描述】：

对于一个白人，我正在处理一个 api 问题，但总是面临这个问题并且找不到任何解决方案。 这是我的ajax请求

$(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");
                
            );

        );

但在 chrome 控制台中会显示此结果

从源“https://www.birdpx.com”访问“https://www.xeno-canto.org/api/2/recordings?query=Greater+Scaup”处的 XMLHttpRequest 已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。

你有什么办法吗？

【问题讨论】：

这能回答你的问题吗？ How does Access-Control-Allow-Origin header work?

看这个：***.com/a/62116593/4650975

这能回答你的问题吗？ Access-Control-Allow-Origin error on axios request even after enabling express CORS middleware

【参考方案1】：

解决此问题的唯一方法是使用代理。代理可以检索浏览器外部的内容并将其传递给您的客户端。这是一个常见问题，有很多选择，例如：

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