Can't call api from koa server inside Nextjs app

[Cheeze]

Hi I've been trying to call my proxy api in my custom app but it returns "405 Method Not Allowed". However, when I paste my proxied api in Google chrome with my store logged in I can reach my endpoint.

Flow: I fetch https://{{store_url}}/apps/hb-core/api/product in React app it 405 Method Not Allowed, CORS Missing Allow Origin.

 Fetch code:

fetch('https://{{store_url}}/apps/hb-core/api/product')

When I call the same url in Google Chrome, the result is success:

Some additional info:

1) My react app is hosted together with koa server, all created with the Shopify CLI

2) The proxy seems to work when it's called from Liquid script tag, and also injected script tags. The only place it doesn't work is in the Shopify app.

Am I calling it wrong in my React app??

Hope someone can help shed some light on this issue.

Thanks!

[Cheeze]

Still looking for an answer...

[wahbii]

Hey,

I am facing the same issue. Did you found any solution for it ?

Thanks

[Cheeze]

Hi,

Yes. Shopify Proxy URL won't work if you call it inside an app. Use the ngrok url instead and it should work.

[Je_Yo]

Hi, try to use "rewrites" in your file "next.config.js", like thiis:

 

[Cheeze]

Hello,

Can you explain more how do I use it? What path do I put under the source and destination?

[Je_Yo · Accepted solution]

"Rewrites allow you to map an incoming request path to a different destination path. Rewrites act as a URL proxy and mask the destination path, making it appear the user hasn't changed their location on the site. In contrast, redirects will reroute to a new page and show the URL changes."

In my case, I use an API of my local shopify server ("http://localhost:8001/start"). 

I used this api, with axios, using source '/start'

Even without the rewrite it should work.

[Cheeze]

Thanks!! That works!