Shopify App Proxy – Ajax HTTP POST Request Returns 400 Bad Request:

I’m working on a Shopify app that includes an AJAX POST request to a proxy app URL. The request works fine locally and on ngrok, but when deployed to Shopify, I receive a 400 Bad Request error.

I made several posts on Shopify’s Community Forums, messaged Shopify developers, surfed Youtube, and checked the documentation many times – unfortunately I have yet to resolve this problem.

To provide more details, I am leveraging a .NET Razorpage application, where the frontend displayed by my proxy app is written in the razor view, and the handler methods my ajax calls hit are in the code-behind file. I configured my proxy url path as apps/member. The following ajax call is meant to take submitted form data by the user and pass it to my backend file. The ajax call that works locally and through ngrok’s url:

$.ajax({
    type: 'POST',
    url: '/apps/member?handler=MethodName',
    contentType: 'application/json',
    data: JSON.stringify(formData),
    headers: {
   
        'RequestVerificationToken': antiForgeryToken,
        'Content-Type': 'application/json'
        
    },
    dataType: 'json',
    beforeSend: function (jqXHR, settings) {
        console.log('Request URL:', settings.url);
        console.log('Request Type:', settings.type);
 
    },
    xhrFields: {
        withCredentials: true
    },
    success: function (response) {
        if (response.success) {
            $('#UserFeedbackMessage').text(response.message).css('color', 'green').show();
        } else {
            $('#UserFeedbackMessage').text(response.message).css('color', 'red').show();
        }
    },
    error: function (xhr, status, error) {
        console.error("Error updating collector info:", error);
        console.log("XHR:", xhr);
        console.log("Status:", status);
        console.log("Response Text:", xhr.responseText);
        $('#UserFeedbackMessage').text("An error occurred while updating your profile.").css('color', 'red').show();
    },
    complete: function (jqXHR, status) {
        console.log('Complete Response Headers:', jqXHR.getAllResponseHeaders());
    }
});

What makes this issue weirder is that this approach was working a year ago, but I know how frequently Shopify updates. I want to know the following:

• Are only ajax GET requests allowed for proxy urls?

• For moving data from the client side to an external api, what is the most common approach?

I tried to leverage a theme-app-extension by placing the ajax call in there and triggering it with a button to see if it made a difference – negative.

I tried to leverage the “method” and “post” attributes of the form tag:

<form id="updateCollectorForm" method="post" action="/apps/member-area?handler=UpdateCollectorInfo">

this also didn’t work (believe it or not, this was working a little over a year ago on Shopify…)