Last year, I had a proxy application that allowed me to pull data of the signed in user via ajax, and allow them to submit their updated profile data via ajax as well.
I have been able to perform HTTP GET requests successfully, but not HTTP POST requests (results in HTTP 400 Bad Request Error).
To be clear, I am not using a theme app extension - I have a button that triggers an ajax call and my goal is to be able to send the data to my backend method. This is the setup I have:
$.ajax({
type: 'POST',
url: '/apps/member-area?handler=UpdateCollectorInfo',
contentType: 'application/json',
data: JSON.stringify(formData),
headers: {
'X-Shopify-Access-Token': accessToken,
'RequestVerificationToken': antiForgeryToken
},
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());
}
});
I have been wrestling with this problem all week, and have thoroughly looked through docs, the forum, stackedoverflow, etc… any help, would be greatly appreciated ![]()