Cors header Access-control-allow-origin封堵Api响应

Question

我有一个index.html文件。用于html和Ajax调用的文件。如果我通过localhost运行文件，计时器api就能正常工作..

但是如果我在Google chrome、Mozilla firefox上直接运行index.html文件，则定时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和火狐足够聪明，可以保护用户免受试图从外部位置提取数据的网站的攻击--除非这个网站通过CORS Headers明确声明它可以被联系，例如从example.com。

所以CORS是一个发生在浏览器级别的安全特性。它在本地工作的事实很可能是因为从相同的域调用API，比如127.0.0.1，它调用127.0.0.1/api，因此被认为是非跨域资源。