javascript - HTTP403: FORBIDDEN - The server understood the request, but is refusing to fulfill it

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=".154378.CRITEO/B9862737.133255611;sz=728x90;click=.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=".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 = ".154378.CRITEO/B9862737.133255611;sz=728x90;click=.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: '/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 pleted 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 - /url/

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.

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.

This is what i'm trying to achieve:

Example Code:

index.html:

<body>
    <iframe src="https://ad.doubleclick/ddm/adi/N4406.154378.CRITEO/B9862737.133255611;sz=728x90;click=http://cat.fr.eu.criteo./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./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/ddm/adi/N4406.154378.CRITEO/B9862737.133255611;sz=728x90;click=http://cat.fr.eu.criteo./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);
            }
        });

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

Share Improve this question asked Oct 14, 2016 at 9:05 Scott Thornton 3411 gold badge3 silver badges17 bronze badges

Pretty ropey at debugging things like these... But perhaps try adding headers to your ajax call? headers: { 'Content-Type': 'application/json; charset=utf-8' } – IronAces Commented Oct 14, 2016 at 9:16
Yes check headers. If post and header are identical, then the server would have no reason to answer once with forbidden and other time with proper result. Your request can't be exactly same, if it is indeed working in other browser - and not just silently failing. – user5542121 Commented Oct 14, 2016 at 9:17
Can you post the full ajax request, including the header? Else you can also try and pare what are the header being sent to server by other browsers and by Edge. – Deepak jha Commented Oct 14, 2016 at 9:23
Thanks for the responses guys, figured it out. It was because i was performing the call from localhost. Which has never posed a problem for me in the past, but i'm guessing it has something to do with the API config stopping localhost connections. – Scott Thornton Commented Oct 14, 2016 at 9:54

Add a ment |

4 Answers 4

Sorted by: Reset to default 5

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.

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.

Try adding these settings to your request:

"headers": {
    "Content-Type": "application/json",
    "cache-control": "no-cache",
},
"processData": false,

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./ja-jp/software-download/windows10

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - HTTP403: FORBIDDEN - The server understood the request, but is refusing to fulfill it - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)