Cors header “訪問控制允許來源”被阻止 Api 響應

Question

我有一個 index.html 文件。 該文件用於 html 和 Ajax 調用。 如果我當時通過本地主機運行文件 api 工作完美..

But if i index.html file direct run on Google chrome, Mozilla firefox that time API given cors access control allow origin block error..

    <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.Z4D236D9A20D102C5ZFE.AD1

所以 CORS 是在瀏覽器級別發生的安全功能。 它在本地工作的事實很可能是由於從同一域調用 API，例如調用 127.0.0.1/api 的 127.0.0.1，因此被認為是非跨域資源。