POS Extension: Unable to make fetch() requests

[dpavlutin]

I am developing an extension for Shopify POS. I am using the newest version of `@Shopify/ui-extensions@2024.7.0` and `@Shopify/ui-extensions-react@2024.7.0`.

The problem happens when I send a request to my server using a fetch() call: it throws with an error `"Fetch failed"`.

 import { useApi } from '@shopify/ui-extensions-react/point-of-sale'

function useCreate() {
  const api = useApi()

  const create = async (): Promise<CreateStatus> => {
    try {
      const sessionToken = await api.session.getSessionToken()

      const { locationId } = api.session.currentSession

      const response = await fetch(`${HOST}/api/products`, {
        method: 'POST',
        mode: 'cors',
        body: JSON.stringify({
          locationId,
        }),
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${sessionToken}`,
        },
        credentials: 'include',
      })
  } catch (error) {
     console.log(error.message) // logs 'Fetch failed'
   }

  return { create }
}

More context

1. What is interesting is that this code DOES work in dev mode, but breaks when the extension is deployed.

2. The CORS settings are configured correctly on the server side, and it seems like the server does not even receive the request.

app.use(
  '/api/*',
  cors({
    origin: ['https://cdn.shopify.com', 'https://extensions.shopifycdn.com'],
  }),
  express.json(),
  shopify.validateAuthenticatedSession()
)

3. When I was using the previous library `@shopify/retail-ui-extensions` I never had this problem.

Has anyone experienced this problem and what could be the solution?

Thanks in advance!

[dpavlutin · Accepted solution]

Shopify POS library works as expected. I had to fix my server DNS settings.