Can't call api from koa server inside Nextjs app

Retired Boards Appdev Tools
1

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
Untitled1.png1515×941 110 KB

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
Untitled2.png1515×941 54.5 KB

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!

2

Still looking for an answer…

3

Hey,

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

Thanks

4

Hi,

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

5

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

Capture.png
Capture.png922×699 45.9 KB

6

Hello,

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

7

“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
Capture.png1296×706 81.8 KB

I used this api, with axios, using source ‘/start’

Capture.png
Capture.png1177×380 25.4 KB

Even without the rewrite it should work.

8

Thanks!! That works!