How to debug the sharepoint web proxy

Question

I am using the sharepoint web proxy to call the AAD token endpoint web service in Azure. When I do the call, the response calls my error callback with a jqXHR object that contains the following:

{  
   "readyState":4,
   "responseText":"{\"error\":{\"code\":\"-1, Microsoft.Data.OData.ODataException\",\"message\":{\"lang\":\"en-US\",\"value\":\"An unexpected 'StartObject' node was found when reading from the JSON reader. A 'PrimitiveValue' node was expected.\"}}}",
   "status":400,
   "statusText":"Bad Request"
}

How can I debug whether this error is occurring on the way into the web proxy, on the way into the MS token endpoint, or on the way back to my page?

This is on SP online if that makes a difference.

Full code:

var postData = {
            grant_type: "authorization_code",
            code: getParameterByName("code"),
            redirect_uri: "[redacted]",
            client_id: "[redacted]",
            resource: "https://management.core.windows.net/",
        };

        $.ajax({
            url: "../_api/SP.WebProxy.invoke",
            type: "POST",
            data: JSON.stringify(
                {
                    "requestInfo": {
                        "__metadata": { "type": "SP.WebRequestInfo" },
                        "Url": "https://login.microsoftonline.com/[redacted]/oauth2/token",
                        "Method": "POST",
                        "Headers": {
                            "results": [{
                                "__metadata": { "type": "SP.KeyValue" },
                                "Key": "Accept",
                                "Value": "application/json",
                                "ValueType": "Edm.String"
                            }]
                        },
                        "Body": JSON.stringify(postData)
                    }
                }),
            headers: {
                "Accept": "application/json",
                "Content-Type": "application/json",
                "X-RequestDigest": $("#__REQUESTDIGEST").val()
            },
            success: onSuccess,
            error: onFail
        });


        function onSuccess(data) {
            $('#report').text("received " + JSON.stringify(data));
        }

        function onFail(jqXHR, exception) {
            var msg = '';
            if (jqXHR.status === 0) {
                msg = 'Not connect.\n Verify Network.';
            } else if (jqXHR.status == 404) {
                msg = 'Requested page not found. [404]';
            } else if (jqXHR.status == 400) {
               msg = JSON.stringify(jqXHR) + '\n\nBad request. [400]';
            } else if (jqXHR.status == 500) {
                msg = 'Internal Server Error [500].';
            } else {
                msg = 'Uncaught Error.\n' + jqXHR.responseText;
            }
            $('#report').html(msg);
        }

Answer 1

The best way I could find to debug the SharePoint Web Proxy is to use an Azure API management gateway, configure that to point to the real resource, and then point the SharePoint Web Proxy to that gateway.

Using that approach I was able to catch all the traffic on the other side of Sharepoint and figure out what its problem was.