Twitter Bootstrap Question posted in

HTTP403: FORBIDDEN – The server understood the request, but is refusing to fulfill it – Twitter bootstrap

I keep getting the above 403 error when performing an AJAX call to an API.

The error occurs in Microsoft Edge, but does not occur in IE, Chrome, Firefox or Safari.

The page does not use bootstrap, as i have read that it can be caused by the page not been able to locate the .LESS files required. I have even tried to include bootstrap to see if that resolved the issue – It did not.

I don’t seem to be able to find anything by googling this, other than some twitter Oauth stuff and the bootstrap answer as above – Both of which aren’t relevant to my application.

As i stated before, the AJAX call works fine in any browser, EXCEPT Edge. The code is the exact same across the various browsers and the response/request headers match one another – So isn’t a case that the POST request is sending incorrect data (in case of different browser defaults or something).

This is what i’m trying to achieve:

index.html contains 4 iFrames housing adverts. My Javascript code then picks up the iFrame tag and overlays a thumbs up/down icon where the user can provide feedback for said adverts. The AJAX call is passed the Advert URL (iFrame src) and the users id (consumer_id). It then returns an impression ID after it has written to the Database to record the thumbs up/down action.

Example Code:

index.html:

<body>
    <iframe src="https://ad.doubleclick.net/ddm/adi/N4406.154378.CRITEO/B9862737.133255611;sz=728x90;click=http://cat.fr.eu.criteo.com/delivery/ck.php?cppv=1&amp;cpp=ZNbxVXxoRmlURGJwS3JrRUZxTXVnNG83QmlTRUhSNDgzZEFXeEt6Q2VkcXpuTlFXTzBPUytNL0t3QW1NR2hiWXMyU1Jjb0NsTDZZQk8ybzRnajZnZlNodTJKNjhiSW8yaFlPTVBDRUlZQjJ5QVNUQjQrNHd5UEJicEI5OS95NUUxMWVDbGRZamZ4RjZYS1FHam5LQ1dpcENzanhtcEhlckpmOEVuSUhRTllIQnBPazlnMnQ3eWVJcjhOSzRYOXYwOXlqYVFrTnI0eDZJSTBjR1lGM2VUVVloQjd3RlJUcndIQUl3NUpRalY0YXV3Q29SRktKSkFJSktueU0vMVdydko4UzZGSldkbUR1RUR4MTU2a0loamFYZlpiZz09fA%3D%3D&amp;maxdest=;dcopt=anid;ord=f4840e2d31;dc_lat=;dc_rdid=;tag_for_child_directed_treatment=?" width="728" height="90" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no" bordercolor="#000000"></iframe>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="client.js"></script>
</body>

AJAX Call:

    // This isn't usually a var, but added for clarity. Usually uses a selector 
    // to grab the entire iframe DOM element, and then store in array.    
        var iframe = "http://ad.doubleclick.net/ddm/adi/N4406.154378.CRITEO/B9862737.133255611;sz=728x90;click=http://cat.fr.eu.criteo.com/delivery/ck.php?cppv=1&amp;cpp=ZNbxVXxoRmlURGJwS3JrRUZxTXVnNG83QmlTRUhSNDgzZEFXeEt6Q2VkcXpuTlFXTzBPUytNL0t3QW1NR2hiWXMyU1Jjb0NsTDZZQk8ybzRnajZnZlNodTJKNjhiSW8yaFlPTVBDRUlZQjJ5QVNUQjQrNHd5UEJicEI5OS95NUUxMWVDbGRZamZ4RjZYS1FHam5LQ1dpcENzanhtcEhlckpmOEVuSUhRTllIQnBPazlnMnQ3eWVJcjhOSzRYOXYwOXlqYVFrTnI0eDZJSTBjR1lGM2VUVVloQjd3RlJUcndIQUl3NUpRalY0YXV3Q29SRktKSkFJSktueU0vMVdydko4UzZGSldkbUR1RUR4MTU2a0loamFYZlpiZz09fA%3D%3D&amp;maxdest=;dcopt=anid;ord=f4840e2d31;dc_lat=;dc_rdid=;tag_for_child_directed_treatment=?";

        $.ajax({
            method: 'POST',
            url: 'http://my.api/url/',
            async: false,
            datatype: 'json',
            data: {
                ad_url: iframe, // fetch ad_url from iframe src
                wittel_consumer: "57fcea30f910092a06806344"
            },
            success: function(data, respText, xhr) {
                console.log('Data',data);
                console.log('XHR',xhr);
            },
            error: function(error) {
                console.log('URL',this.url);
                console.log('Error',error);
            }
        });

In this code, the AJAX is actioned, but returns under the ‘error’ method. I can see the URL is correct, and inside the error callback, I just get an object containing the likes of readyState: 4, status: 403, statusText: "Forbidden". As stated, the API does work, as it is successfully completed in any other browser, so must be something to do with the way Edge handles the request. Or could it be a server configuration thing? I honestly have no idea.

Full Error:
HTTP403: FORBIDDEN - The server understood the request, but is refusing to fulfill it.
(XHR)POST - http://my.api/url/

Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    For anyone else having this issue:

    I put my code on a server and ran to it from there to test if it was the localhost connection - Which it was.

    The API i am using must be configured to not allow localhost connections, which i've never experienced before.

    Great way to waste 2 days and lose your sanity though!

    Thanks for the above suggestions anyway. Appreciate it.


  2. 0

    Try adding these settings to your request:

    "headers": {
    "Content-Type": "application/json",
    "cache-control": "no-cache",
},
"processData": false,
    Login or Signup to reply.
  3. 0

    Please include credentials in the options.

    var url = 'https://dummy_url/_api/lists'
var options = {
    headers: {"Accept": "application/json; odata=verbose"},
    credentials: 'include'
}

fetch(url, options).then( 
    res => res.json().then(json => console.dir(json)) 
)

    This works for me.

    Login or Signup to reply.
  4. 0

    Anyone else who gets stuck with this and none of the above answers help you:

    Check your version of Edge, 17 doesn’t support Promises.

    Upgrade Windows with the October 2018 update which includes Edge 18 and Promises are supported, fetch requests will work.

    https://www.microsoft.com/ja-jp/software-download/windows10

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search