Beacon API Cannot load due to access control checks when navigating to new page












6















I have a navigation.sendBeacon request being sent during a pagehide event on Safari with some analytics data to an endpoint on the same domain as the current page. This works fine when the tab is being closed, but when navigating to a new url, Safari throws Beacon API Cannot load <url> due to access control checks while trying to make the request.



This issue does not occur on Chrome, and there are no other logs shown. I don't think this is a CORS request, all domains and subdomains are the same.



Has anyone else seen this or know how to fix?










share|improve this question























  • HI, I am also facing same issues in safari browser, can any one let me know the solution. Thanks.

    – Hari c
    Apr 27 '18 at 12:43











  • @RyanCheu I am encountering the same issue. any workarounds / fixes / relevant info you;v learned ? is it a confirmed bug that was not yet filed on the webkit bug system ?

    – OrenM
    May 30 '18 at 8:02











  • @OrenM I wasn't able to work around this, it'd probably be good to file a bug.

    – RyanCheu
    Jun 6 '18 at 20:50













  • @RyanCheu did you file a bug? If so can you link to it here? Note: this is definitely not a CORS issue because I run sendBeacon() just fine in situation where the page is not unloading.

    – Philip Walton
    Aug 2 '18 at 0:31






  • 3





    Filed: bugs.webkit.org/show_bug.cgi?id=188329

    – Philip Walton
    Aug 4 '18 at 16:59
















6















I have a navigation.sendBeacon request being sent during a pagehide event on Safari with some analytics data to an endpoint on the same domain as the current page. This works fine when the tab is being closed, but when navigating to a new url, Safari throws Beacon API Cannot load <url> due to access control checks while trying to make the request.



This issue does not occur on Chrome, and there are no other logs shown. I don't think this is a CORS request, all domains and subdomains are the same.



Has anyone else seen this or know how to fix?










share|improve this question























  • HI, I am also facing same issues in safari browser, can any one let me know the solution. Thanks.

    – Hari c
    Apr 27 '18 at 12:43











  • @RyanCheu I am encountering the same issue. any workarounds / fixes / relevant info you;v learned ? is it a confirmed bug that was not yet filed on the webkit bug system ?

    – OrenM
    May 30 '18 at 8:02











  • @OrenM I wasn't able to work around this, it'd probably be good to file a bug.

    – RyanCheu
    Jun 6 '18 at 20:50













  • @RyanCheu did you file a bug? If so can you link to it here? Note: this is definitely not a CORS issue because I run sendBeacon() just fine in situation where the page is not unloading.

    – Philip Walton
    Aug 2 '18 at 0:31






  • 3





    Filed: bugs.webkit.org/show_bug.cgi?id=188329

    – Philip Walton
    Aug 4 '18 at 16:59














6












6








6


1






I have a navigation.sendBeacon request being sent during a pagehide event on Safari with some analytics data to an endpoint on the same domain as the current page. This works fine when the tab is being closed, but when navigating to a new url, Safari throws Beacon API Cannot load <url> due to access control checks while trying to make the request.



This issue does not occur on Chrome, and there are no other logs shown. I don't think this is a CORS request, all domains and subdomains are the same.



Has anyone else seen this or know how to fix?










share|improve this question














I have a navigation.sendBeacon request being sent during a pagehide event on Safari with some analytics data to an endpoint on the same domain as the current page. This works fine when the tab is being closed, but when navigating to a new url, Safari throws Beacon API Cannot load <url> due to access control checks while trying to make the request.



This issue does not occur on Chrome, and there are no other logs shown. I don't think this is a CORS request, all domains and subdomains are the same.



Has anyone else seen this or know how to fix?







javascript safari






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Apr 26 '18 at 22:15









RyanCheuRyanCheu

1,54342441




1,54342441













  • HI, I am also facing same issues in safari browser, can any one let me know the solution. Thanks.

    – Hari c
    Apr 27 '18 at 12:43











  • @RyanCheu I am encountering the same issue. any workarounds / fixes / relevant info you;v learned ? is it a confirmed bug that was not yet filed on the webkit bug system ?

    – OrenM
    May 30 '18 at 8:02











  • @OrenM I wasn't able to work around this, it'd probably be good to file a bug.

    – RyanCheu
    Jun 6 '18 at 20:50













  • @RyanCheu did you file a bug? If so can you link to it here? Note: this is definitely not a CORS issue because I run sendBeacon() just fine in situation where the page is not unloading.

    – Philip Walton
    Aug 2 '18 at 0:31






  • 3





    Filed: bugs.webkit.org/show_bug.cgi?id=188329

    – Philip Walton
    Aug 4 '18 at 16:59



















  • HI, I am also facing same issues in safari browser, can any one let me know the solution. Thanks.

    – Hari c
    Apr 27 '18 at 12:43











  • @RyanCheu I am encountering the same issue. any workarounds / fixes / relevant info you;v learned ? is it a confirmed bug that was not yet filed on the webkit bug system ?

    – OrenM
    May 30 '18 at 8:02











  • @OrenM I wasn't able to work around this, it'd probably be good to file a bug.

    – RyanCheu
    Jun 6 '18 at 20:50













  • @RyanCheu did you file a bug? If so can you link to it here? Note: this is definitely not a CORS issue because I run sendBeacon() just fine in situation where the page is not unloading.

    – Philip Walton
    Aug 2 '18 at 0:31






  • 3





    Filed: bugs.webkit.org/show_bug.cgi?id=188329

    – Philip Walton
    Aug 4 '18 at 16:59

















HI, I am also facing same issues in safari browser, can any one let me know the solution. Thanks.

– Hari c
Apr 27 '18 at 12:43





HI, I am also facing same issues in safari browser, can any one let me know the solution. Thanks.

– Hari c
Apr 27 '18 at 12:43













@RyanCheu I am encountering the same issue. any workarounds / fixes / relevant info you;v learned ? is it a confirmed bug that was not yet filed on the webkit bug system ?

– OrenM
May 30 '18 at 8:02





@RyanCheu I am encountering the same issue. any workarounds / fixes / relevant info you;v learned ? is it a confirmed bug that was not yet filed on the webkit bug system ?

– OrenM
May 30 '18 at 8:02













@OrenM I wasn't able to work around this, it'd probably be good to file a bug.

– RyanCheu
Jun 6 '18 at 20:50







@OrenM I wasn't able to work around this, it'd probably be good to file a bug.

– RyanCheu
Jun 6 '18 at 20:50















@RyanCheu did you file a bug? If so can you link to it here? Note: this is definitely not a CORS issue because I run sendBeacon() just fine in situation where the page is not unloading.

– Philip Walton
Aug 2 '18 at 0:31





@RyanCheu did you file a bug? If so can you link to it here? Note: this is definitely not a CORS issue because I run sendBeacon() just fine in situation where the page is not unloading.

– Philip Walton
Aug 2 '18 at 0:31




3




3





Filed: bugs.webkit.org/show_bug.cgi?id=188329

– Philip Walton
Aug 4 '18 at 16:59





Filed: bugs.webkit.org/show_bug.cgi?id=188329

– Philip Walton
Aug 4 '18 at 16:59












1 Answer
1






active

oldest

votes


















1














Using any sort of Asynchronous HTTP request, whether it is sendBeacon, fetch, or XMLHttpRequest seems to have problems in both desktop and iOS Safari at the moment when inside a pagehide event. I have received versions of the same error such as Fetch API cannot load ... due to access control checks when I use different types of HTTP requesters within the pagehide event. I am sure that it is not a CORS error, since the exact same request does not have a problem outside of a pagehide event.



While not recommended due the its blocking of the main thread, I am using synchronous requests until the bug is patched in Safari. For my use case, it is more critical that the analytics data from pagehide is successfully sent even even though it causes a small delay to the end user. Synchronous HTTP requests are a meh workaround until the bug is remediated, which hopefully is soon since the link from @Phillip Walton suggests that a patch has been accepted but obviously has not been released yet.



if (isSafari && pageHideBroken) {
$.ajax({
type: "POST",
async: false, //The most important line
url: `https://`,
data: 'Goodbye',
timeout: 5000
});
}
else {
navigator.sendBeacon(`https://`, 'Goodbye');
}


I have confirmed that on both Desktop Safari and iOS Safari that my backend successfully receives the data using this approach. JQuery is not required to make a sync HTTP request, but I just used $.ajax as the example due to its conciseness compared to XMLHttpRequest. If you make this workaround conditional like I have, then it is easy to swap back to navigator.sendBeacon once the bug is fixed! This type of browser-dependent behavior is never fun to code around.






share|improve this answer























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f50052592%2fbeacon-api-cannot-load-url-due-to-access-control-checks-when-navigating-to-new%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    1














    Using any sort of Asynchronous HTTP request, whether it is sendBeacon, fetch, or XMLHttpRequest seems to have problems in both desktop and iOS Safari at the moment when inside a pagehide event. I have received versions of the same error such as Fetch API cannot load ... due to access control checks when I use different types of HTTP requesters within the pagehide event. I am sure that it is not a CORS error, since the exact same request does not have a problem outside of a pagehide event.



    While not recommended due the its blocking of the main thread, I am using synchronous requests until the bug is patched in Safari. For my use case, it is more critical that the analytics data from pagehide is successfully sent even even though it causes a small delay to the end user. Synchronous HTTP requests are a meh workaround until the bug is remediated, which hopefully is soon since the link from @Phillip Walton suggests that a patch has been accepted but obviously has not been released yet.



    if (isSafari && pageHideBroken) {
    $.ajax({
    type: "POST",
    async: false, //The most important line
    url: `https://`,
    data: 'Goodbye',
    timeout: 5000
    });
    }
    else {
    navigator.sendBeacon(`https://`, 'Goodbye');
    }


    I have confirmed that on both Desktop Safari and iOS Safari that my backend successfully receives the data using this approach. JQuery is not required to make a sync HTTP request, but I just used $.ajax as the example due to its conciseness compared to XMLHttpRequest. If you make this workaround conditional like I have, then it is easy to swap back to navigator.sendBeacon once the bug is fixed! This type of browser-dependent behavior is never fun to code around.






    share|improve this answer




























      1














      Using any sort of Asynchronous HTTP request, whether it is sendBeacon, fetch, or XMLHttpRequest seems to have problems in both desktop and iOS Safari at the moment when inside a pagehide event. I have received versions of the same error such as Fetch API cannot load ... due to access control checks when I use different types of HTTP requesters within the pagehide event. I am sure that it is not a CORS error, since the exact same request does not have a problem outside of a pagehide event.



      While not recommended due the its blocking of the main thread, I am using synchronous requests until the bug is patched in Safari. For my use case, it is more critical that the analytics data from pagehide is successfully sent even even though it causes a small delay to the end user. Synchronous HTTP requests are a meh workaround until the bug is remediated, which hopefully is soon since the link from @Phillip Walton suggests that a patch has been accepted but obviously has not been released yet.



      if (isSafari && pageHideBroken) {
      $.ajax({
      type: "POST",
      async: false, //The most important line
      url: `https://`,
      data: 'Goodbye',
      timeout: 5000
      });
      }
      else {
      navigator.sendBeacon(`https://`, 'Goodbye');
      }


      I have confirmed that on both Desktop Safari and iOS Safari that my backend successfully receives the data using this approach. JQuery is not required to make a sync HTTP request, but I just used $.ajax as the example due to its conciseness compared to XMLHttpRequest. If you make this workaround conditional like I have, then it is easy to swap back to navigator.sendBeacon once the bug is fixed! This type of browser-dependent behavior is never fun to code around.






      share|improve this answer


























        1












        1








        1







        Using any sort of Asynchronous HTTP request, whether it is sendBeacon, fetch, or XMLHttpRequest seems to have problems in both desktop and iOS Safari at the moment when inside a pagehide event. I have received versions of the same error such as Fetch API cannot load ... due to access control checks when I use different types of HTTP requesters within the pagehide event. I am sure that it is not a CORS error, since the exact same request does not have a problem outside of a pagehide event.



        While not recommended due the its blocking of the main thread, I am using synchronous requests until the bug is patched in Safari. For my use case, it is more critical that the analytics data from pagehide is successfully sent even even though it causes a small delay to the end user. Synchronous HTTP requests are a meh workaround until the bug is remediated, which hopefully is soon since the link from @Phillip Walton suggests that a patch has been accepted but obviously has not been released yet.



        if (isSafari && pageHideBroken) {
        $.ajax({
        type: "POST",
        async: false, //The most important line
        url: `https://`,
        data: 'Goodbye',
        timeout: 5000
        });
        }
        else {
        navigator.sendBeacon(`https://`, 'Goodbye');
        }


        I have confirmed that on both Desktop Safari and iOS Safari that my backend successfully receives the data using this approach. JQuery is not required to make a sync HTTP request, but I just used $.ajax as the example due to its conciseness compared to XMLHttpRequest. If you make this workaround conditional like I have, then it is easy to swap back to navigator.sendBeacon once the bug is fixed! This type of browser-dependent behavior is never fun to code around.






        share|improve this answer













        Using any sort of Asynchronous HTTP request, whether it is sendBeacon, fetch, or XMLHttpRequest seems to have problems in both desktop and iOS Safari at the moment when inside a pagehide event. I have received versions of the same error such as Fetch API cannot load ... due to access control checks when I use different types of HTTP requesters within the pagehide event. I am sure that it is not a CORS error, since the exact same request does not have a problem outside of a pagehide event.



        While not recommended due the its blocking of the main thread, I am using synchronous requests until the bug is patched in Safari. For my use case, it is more critical that the analytics data from pagehide is successfully sent even even though it causes a small delay to the end user. Synchronous HTTP requests are a meh workaround until the bug is remediated, which hopefully is soon since the link from @Phillip Walton suggests that a patch has been accepted but obviously has not been released yet.



        if (isSafari && pageHideBroken) {
        $.ajax({
        type: "POST",
        async: false, //The most important line
        url: `https://`,
        data: 'Goodbye',
        timeout: 5000
        });
        }
        else {
        navigator.sendBeacon(`https://`, 'Goodbye');
        }


        I have confirmed that on both Desktop Safari and iOS Safari that my backend successfully receives the data using this approach. JQuery is not required to make a sync HTTP request, but I just used $.ajax as the example due to its conciseness compared to XMLHttpRequest. If you make this workaround conditional like I have, then it is easy to swap back to navigator.sendBeacon once the bug is fixed! This type of browser-dependent behavior is never fun to code around.







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Jan 2 at 6:24









        Henry AgnewHenry Agnew

        112




        112
































            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f50052592%2fbeacon-api-cannot-load-url-due-to-access-control-checks-when-navigating-to-new%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            Monofisismo

            Angular Downloading a file using contenturl with Basic Authentication

            Olmecas