Solved

Can't call api from koa server inside Nextjs app

Cheeze
Shopify Partner
8 0 2

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!

 

Accepted Solution (1)
Je_Yo
Tourist
10 1 2

This is an 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"). 

Capture.png

 

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

Capture.png

 

Even without the rewrite it should work.

View solution in original post

Replies 7 (7)

Cheeze
Shopify Partner
8 0 2

Still looking for an answer...

wahbii
Visitor
1 0 0

Hey,

 

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

 

Thanks

Cheeze
Shopify Partner
8 0 2

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
10 1 2

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

Capture.png

 

Cheeze
Shopify Partner
8 0 2

Hello,

 

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

Je_Yo
Tourist
10 1 2

This is an 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"). 

Capture.png

 

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

Capture.png

 

Even without the rewrite it should work.

Cheeze
Shopify Partner
8 0 2

Thanks!! That works!