Cors header "Access-control-allow-origin" blocked Api Response

Question

I have a index.html file . That file for a html and Ajax call . If i run file through localhost that time api working Perfect..

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>

take a look here https://stackoverflow.com/questions/43565877/no-access-control-allow-origin-header-laravel — Zia Yamin, Apr 03 '21 at 04:26
@zia Yamin but i have a only html file not used laravel simple html ajax . — Ravi Makwana, Apr 03 '21 at 04:33

score 0 · Answer 1 · answered Apr 03 '21 at 06:03

0

It is not a matter of which tech stack you are using but of how you are trying to achieve your API consumption. You are requesting a remote resource (https://3genrib1y0.execute-api.....) from a probably totally different domain like example.com. Now chrome and firefox are smart enough to protect the user against a site that is trying to extract data from a foreign location - unless this site explicitly states via CORS Headers that it is allowed to be contacted e.g. from example.com.

So CORS is a security feature that happens on the level of your browser. The fact that it works locally is most likely due to calling the API from the same domain, like 127.0.0.1 which calls 127.0.0.1/api and is therefore considered a non-cross-origin ressource.

answered Apr 03 '21 at 06:03

mynd

786
5
8

So any code Solution available in my case ? – Ravi Makwana Apr 03 '21 at 06:52
Your code is most likely fine. What you have to do is to setup your API-Server hosted at `https://3genrib1y0.execute-api.us-east-1.amazonaws.com` to add the appropriate CORS Header in its HTTP response. – mynd Apr 03 '21 at 09:04
I don't have api access code , you have any other related Solution for this ?? – Ravi Makwana Apr 03 '21 at 09:22

Cors header "Access-control-allow-origin" blocked Api Response

1 Answers1