Cors 标头“Access-control-allow-origin”阻止了 Api 响应

Question

我有一个 index.html 文件。 该文件用于 html 和 Ajax 调用。如果我通过本地主机运行文件，那么 api 工作完美..

但是如果我的 index.html 文件直接在 Google chrome 上运行，Mozilla firefox 那个时候 API 给定 cors 访问控制允许源块错误..

    <script type="text/javascript">
        

        $( document ).ready(function() {
            var channel_fid = $(this).attr("data-channel_fid");
            var channel_id = $(this).attr("data-channel_id");
            var userId = $('#uuid').val();
            $.ajax({
                url: 'https://3genrib1y0.execute-api.us-east-1.amazonaws.com/public/users/5ebc3ba8-37e6-4188-b52e-2e18d4a80034/channels',
                type: "GET",
                dataType:'json',
            })
            .done(function(res) {
                if(res.success==true){
                    var val = res.galleries;
                    var options = new Array();
                    $.each(res.galleries, function(index, values) {
                        options.push('<li class="channels-list__item hover'+index+'" data-channel_fid="'+values.gallery_fid+'"><img src="https://www.cincopa.com/media-platform/api/thumb.aspx?size=large&amp;fid='+values.gallery_fid+'"><div class="channels-list__info"><div class="channels-list__itemname"><h3>'+values.name+'</h3></div><div class="channels-list__itemdescr"><p>'+values.description+'</p></div></div></li>');
                    });
                    $('.dropdownItemContainer').html(options);

                }
                else
                {
                    $('.dropdownItemContainer').html('');
                }
            });



            var active = document.querySelector(".hover0") || document.querySelector(".dropdownItemContainer li");

            document.addEventListener("keydown",handler);

            function handler(e){
            // console.log(active.classList);
            active.classList.remove("hover0");
            if (e.which == 40){
                active = active.nextElementSibling || active;
            }else if (e.which == 38){      
                active = active.previousElementSibling || active;
            }else{
                active = e.target;
            }
            active.classList.add("hover0");
        }
    });

</script>

Answer 1

这与您使用的是哪种技术堆栈无关，而是您如何尝试实现 API 使用。您正在从可能完全不同的域（例如 example.com）请求远程资源 (https://3genrib1y0.execute-api.....)。现在 chrome 和 firefox 足够聪明，可以保护用户免受试图从外国位置提取数据的站点的攻击——除非该站点通过CORS Headers 明确声明允许联系它，例如来自 example.com。

因此，CORS 是一种发生在浏览器级别的安全功能。它在本地工作的事实很可能是由于从同一域调用 API，例如 127.0.0.1 调用 127.0.0.1/api，因此被视为非跨域资源。