Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Issue testing Post Purchase extension

Issue testing Post Purchase extension

Diddley
Shopify Partner
2 0 0

A couple of months ago, I was working on a Post Purchase checkout extension. It was working in my development environment.

In order to clean up my code, I decided to start again and used the tutorial as a starting point:

https://shopify.dev/docs/apps/checkout/product-offers/post-purchase/getting-started

 

I have followed all the steps and for some reason can not get it to work. I get an error on the pre-loading of the request. The error message indicates that it is a CORS "Access-Control-Allow-Origin" issue, but some of my research seems to indicate that it is not actually a CORS issue, but more a case of the server not accepting "OPTION" requests. There are no explicit OPTION requests in the code, but I think there is a shopify cloudflare helper that sends a preflight request to the server.

 

2 questions: 

1) How was this working in my previous iteration?

2) More importantly, how to I fix this issue?

Replies 2 (2)

Liam
Community Manager
3108 344 904

Hi Diddley,

 

This is indeed a tricky issue. CORS errors can sometimes be misleading as they can occur due to a range of issues, not always to CORS itself. Here are some suggestions on how you can approach this problem:

1) The reason it was working in your previous iteration could be due to a number of factors. It's possible that the server was configured differently at that time, or the code was structured in a way that it didn't trigger a preflight OPTIONS request.

2) To fix this issue, here are some steps you can take:

  • Check your server configuration: Ensure your server is set up to handle OPTIONS requests and that it includes the necessary Access-Control-Allow-Origin header in its responses. If you're using Express.js, you can use the cors middleware to easily manage this.

  • Check your API calls: OPTIONS requests are triggered as a "preflight" check by the browser when certain conditions are met, such as when you're making a request to a different domain, using certain HTTP methods, or including certain headers. Review your API calls to see if they're triggering a preflight request and if it's necessary.

  • Use a proxy: If you're developing locally, you might consider using a proxy to bypass CORS restrictions. Tools like ngrok can help with this.

 

Hope this helps!

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

Diddley
Shopify Partner
2 0 0

Hi Liam

 

Thanks for the prompt response. 

I have followed the tutorial (above) step by step. I just want to create a scaffold before modifying anything. As soon as I test it, I experience this issue. I have not connected to any external server, only the shopify dev app.

I have tried with a cloudflared tunnel. I have tried with an ngrok tunnel too. 

The only server I am attempting to connect to, is the app running locally on my machine -

1 - $ npm run dev

2 - See what port it is running on and modify the tunnel accordingly 

3 - cut and past the extension URL in the chrome shopify extension 

4 - make a test purchase in the development store.

(5 - inspect the console to see why it isn't working!)

 

Any ideas?