Shopify App Proxy gets CORS error or 404

[DevBijan]

Hello all, I am working on a Shopify app, and with it a theme extension to pull data from my database and display it for users. I've gone through all the posts I could find about this topic and tried all the suggestions I found, however I am still getting either a CORS error or a 404 not found for my api endpoint.

I have set up an app proxy in my partner's dashboard and I updated the proxy URL every time it's updated. I am using the default cloudflare tunnel setup.

I am using the Remix template, here is my folder structure

Project{

  app{

     routes{

       api{

        data.server.js //MY ENDPOINT

       }

     }

  }

  EXTENSIONS{

     My_Extension{

      blocks{

        App_block.liquid //MY APP BLOCK

      } 

    }

  }

}

In my App Block I am trying to fetch data from my data.server.js using an App proxy. This returns a 404 error. I added fetch options and headers to try and solve the problem with no luck. If I use the cloudflare tunnel URL in my fetch, I will get the cors policy, that's why I have 'Access-Control-Allow-Origin': 'https://{STORE-NAME}.myshopify.com' as an option.

async function fetchData() {
    try {
      const response = await fetch('/apps/api', {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin': 'https://{STORE-NAME}.myshopify.com',
        }
      });
      if (!response.ok) {
        throw new Error('Network response was not ok ' + response.statusText);
      }
      const data = await response.json();
      const container = document.getElementById('app-block-container');
      container.innerText = JSON.stringify(data, null, 2);
    } catch (error) {
      console.error('There has been a problem with your fetch operation:', error);
    }
  }

  fetchData();

And then my data.server.js

import { authenticate } from "../../shopify.server";
import prisma  from '../../db.server';


export let data = async ({ request }) => {
    try {
        const shopy = await authenticate.admin(request);
        const allModels = await prisma.MY_DATA.findMany({
          where: { 
            shop: { equals: shopy.session.shop} 
          },
        });
        return {
          status: 200,
          headers: {
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin': 'https://{STORE-NAME}.myshopify.com',
            'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
          },
          data: JSON.stringify(allModels),
        };
      } catch (error) {
        console.error(error);
        return {
          status: 500,
          data: 'An error occurred while fetching data.',
        };
      } finally {
        await prisma.$disconnect();
      }


  };

I'm not sure where I'm going wrong. Like I said, I've looked through a bunch of posts, it seems like a relatively common problem, but without any luck on solving it.

Any help would be appreciated! Thanks!

[DevBijan · Accepted solution]

I fixed my issue.

1. Moved my api route to the main folder according to remix documentation
2. Reinstalled app.

My proxy URL changed to .....cloudflare.com/MY_ENDPOINT

[joseacat]

Hi, @DevBijan

Thanks a lot for sharing your experience. Currently, I am in the same problem: I have to fetch an application route from a block.
With the example you give above, with the subpath 'api' and proxy url '....cloudflare.com/my_endpoint'. What url do you fetch?

[DevBijan]

Hey, I am fetching '/prefix/subpath' so for example: '/apps/api'

[joseacat]

Thank you so much!
And if that's not too many questions... What URL proxy do you have in the configuration and what route do you use in the app?
Is it necessary to reinstall the app?

[DevBijan]

You can name the route inside your app anything you want. For me my route is 'modelData.jsx' so my proxy url is '...cloudflare.com/modelData'

This will result in fetch('/apps/api') to fetch from '...cloudflare.com/modelData'

If everything is set up correctly but not working during testing, try reinstalling the app to your store.

[joseacat]

Exact! After reinstalling it worked.
Thank you so much!

[iffikhan30]

Hello DevBijan,

I am stuck a same as you.

1) I add file to main folder getData.jsx as per your solution
2) Reinstalled app 

My proxy URL apps/api
ENDPOINT getData

I am using ngrok for tunnel

On My console network api error show 302 and auth login 404 not found.

[DevBijan]

Hello, 

make sure to double check that the app-proxy url is using the same ngrok tunnel url. It doesn't update automatically so you will need to adjust your app setup each time.

If your path is /apps/api and you have a tunnel url that looks like: ....ngrok.com/getData

you can do a fetch statement like this via an app block.

      const response = await fetch('/apps/api', {

        method: 'GET',

        headers: {

          'Content-Type': 'application/json',

        },

      });

[iffikhan30]

Hi Dev,

Thanks for reply i figure out the issue, I add admin auth that's why not fetch api, when i change to public auth its work. 
Thanks Dev.