JonathanEsign’s answer is correct, but I didn’t understand how to implement the suggested fix at first. But after some experimentation, I figured out what I had to do.
Previously, in my app-block I was constructing my Shopify app’s base url from the window.location.origin, as shown below:
function makeAppBaseUrl () {
const baseUrlString = window.location.origin;
const baseUrl = new URL(baseUrlString)
return new URL('/apps/appName/', baseUrl)
}
However, I noticed that window.location.origin was always the store-name.myshopify.com domain. This meant that the app would then redirect to the store’s primary domain (e.g., store-name.com), which caused the issue where POST requests were converted to GET requests.
To resolve this, I needed to retrieve the store’s primary domain directly to avoid the redirect. So I made the following changes:
In my app-block.liquid file, I found you can retrieve the primary domain via the shop.domain attribute. Then I passed in this attribute to an HTML element so that I could later access it in my app.js file. Here’s what my app-block.liquid file looks like:
And then in my app.js file, I created the following function to retrieve the store’s primary domain that I passed into the div above, and then used this domain to generate the app base url:
function makeAppBaseUrl () {
const shopDomain = document.getElementById("container").dataset.shopDomain
const baseUrlString = 'https://' + shopDomain;
const baseUrl = new URL(baseUrlString)
return new URL('/apps/appName/', baseUrl)
}
Now, my POST requests get received in my app server as POST requests, like they should. Hope this helps anyone with this issue.