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:
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.
1) How was this working in my previous iteration?
2) More importantly, how to I fix this issue?
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!
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!)