How do I send a post request to my local node app?

Store Design

Topic summary

A developer is encountering CORS errors when sending requests from a Shopify theme extension to their local Node.js development server (exposed via ngrok).

Initial Problem:

  • Method mismatch between client (GET) and server (POST/GET)
  • CORS headers incorrectly set on client instead of server

Proposed Solutions:

  1. Configure CORS middleware on the server side (using packages like cors for Express/Koa)
  2. Add mode: "cors" to the fetch request
  3. Include "ngrok-skip-browser-warning": "69420" header to bypass ngrok’s browser warning
  4. Set Access-Control-Allow-Origin header from server, preferably with specific domain instead of wildcard “*”

Current Status:
The original poster switched to another project before testing the solutions, so the issue remains unresolved. The thread later diverges into related questions about integrating Shopify public apps with theme extensions and retrieving shop URLs in backend middleware.

Summarized with AI on November 18. AI used: claude-sonnet-4-5-20250929.
1

I am trying to send a post request to my local development server . I have created a simple api here below

router.post("/test/api", (ctx) => {
    ctx.response;
  });

so Now I am trying to send a request from my theme extension using following script,

const appDomain =
  "https://f38f-103-117-194-9.ngrok.io/auth?shop=spr-test-store.myshopify.com";
fetch(`${appDomain}/api/test/api`, {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
      "Access-Control-Allow-Origin": "*",
      "X-Shopify-Access-Token": "dde451fc5dba******93c915af613",
    },
  });

I am getting CROS error. any solution for this problem ?

2

Hey, I’m happy to help.

There are two issues with your script:

  1. The “Access-Control-Allow-Origin” header needs to be set by your server, not your client.
  2. You’re using the POST method on your server but GET on the client.

For problem #1, you need to set that header from your server. It looks like you’re using Koa or Express. Use a package like this one: https://expressjs.com/en/resources/middleware/cors.html. It’ll configuration the CORS headers based on what you need. Using “*” is wide open… if you can, I’d recommend using the domain of your clients.

For problem #2, make sure the method in your fetch call matches the method you’ve set on your route.

3

Sorry it is actually GET method, I accidentally wrote here POST, but in server it is GET

also cros already enabled in your default node app template,

server.use(
    cors({
      origin: "*",
    })
  );
4

Ah! Okay, then, the only other thing I can think of is setting “mode” to “cors” on your fetch.

const appDomain =
  "https://f38f-103-117-194-9.ngrok.io/auth?shop=spr-test-store.myshopify.com";

fetch(`${appDomain}/api/test/api`, {
    method: "GET",
    mode: "cors",
    headers: {
      "Content-Type": "application/json",
      "X-Shopify-Access-Token": "dde451fc5dba******93c915af613",
    },
  });
5

Hi @masumluf ,

You can follow the instruction below:

const appDomain =
  "https://f38f-103-117-194-9.ngrok.io/auth?shop=spr-test-store.myshopify.com";

fetch(`${appDomain}/api/test/api`, {
    method: "GET",
    mode: "cors",
    headers: {
      "Content-Type": "application/json",
      "X-Shopify-Access-Token": "dde451fc5dba******93c915af613",
    },
  });

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

Best regards.

6

Ok I will check and let you know.Thank you

7

Great! Would you be able to mark my answer as the solution once you’ve had a chance to test it?

1 Like
8

Hello Ryan, Actually I switched to another project so I am not sure when I will test it, but if it is work I will definitely mark it as solution.

1 Like
9

@RyanMacdonald how i can integrate with my shopify public app with the shopify theme app extension ?

10

Hi @masumluf , You have to do skip ngrok browser warning
const url = “https://97fd-61-247-227-239.in.ngrok.io/”;
const headers = new Headers({ “ngrok-skip-browser-warning”: “69420” });

async function cookieTest() {
fetch(${url}api/auth/cookieTest, {
method: “get”,
headers: headers,
})
.then((response) => response.json())
.then((data) => console.log(data))
.catch((err) => console.log(err));
}
if useful marks as like and accept solution

11

@RyanMacdonald could you please help me. How to get shop url in node and react app in backend or serversde. I want shop url in ndex.js or middlewre? I am calling this api but failed to get shop url here

https://{shop}/admin/api/2021-04/script_tags.json

How to get value of {shop}?