Issue testing Post Purchase extension

[Diddley]

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?

[Liam]

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!

[Diddley]

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?