Can't call api from koa server inside Nextjs app

Cheeze
New Member
4 0 0

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.

 

Untitled1.png

 Fetch code:

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

 

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

Untitled2.png

 

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!

 

Replies 6 (6)
Cheeze
New Member
4 0 0

Still looking for an answer...

wahbii
New Member
1 0 0

Hey,

 

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

 

Thanks

Cheeze
New Member
4 0 0

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
Tourist
7 0 2

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

Capture.png

 

Cheeze
New Member
4 0 0

Hello,

 

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

Je_Yo
Tourist
7 0 2

"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"). 

Capture.png

 

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

Capture.png

 

Even without the rewrite it should work.