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

Store Design
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?

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.

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}?