So after revisiting old shopify proxy applications for a little over a year, there seems to have been an update when it comes to making POST requests to App Proxies. I've been getting the same 400 Bad Request errors specifically for POST requests only when trying to perform ajax calls to hit my app's backend methods:
$.ajax({
type: 'POST',
url: '/apps/member-area',
headers: {
'X-Shopify-Access-Token': accessToken,
'RequestVerificationToken': antiForgeryToken,
'Content-Type': 'application/json'
},
data: JSON.stringify(formData),
dataType: 'json',
beforeSend: function (jqXHR, settings) {
console.log('Request URL:', settings.url);
console.log('Request Type:', settings.type);
console.log('Request Headers:', jqXHR.getAllResponseHeaders());
console.log('Request Data:', settings.data);
},
xhr: function () {
var xhr = new window.XMLHttpRequest();
xhr.addEventListener('readystatechange', function () {
if (xhr.readyState === 4) { // DONE
console.log('Response Headers:', xhr.getAllResponseHeaders());
console.log('Request Data:', xhr);
}
});
return xhr;
},
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();
}
});
Have you guys experienced this problem as well?
