Cors Error while using api proxy in checkout ui extensions node template

Extensions
1

I’m trying to make an API call to my Express app from a Checkout UI extension using an API proxy, but I’m still encountering a CORS error.
checkout.jsx -

const response = fetch("https://dev-ravindra.myshopify.com/apps/survey", { 
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            "Access-Control-Allow-Origin": "*", 
          },
          body: JSON.stringify({ surveyResponse: "example" }), 
        }
1 Like
2

Hi Ravindra

Here are some steps you could try to resolve this issue:

  1. Use the Shopify API Proxy: Shopify provides an API proxy feature that allows you to route requests through the Shopify domain, avoiding CORS issues. Ensure that your app is configured to use the API proxy. You can define the proxy in your app’s configuration and make requests to /apps/<your-app-name> instead of directly to your server.
  2. Set Up CORS in Your Express App: Ensure your Express app is configured to handle CORS properly. Use the cors middleware to allow requests from the Shopify domain. For example:
   const cors = require('cors');
   app.use(cors({
       origin: 'https://<your-shopify-store>.myshopify.com',
       methods: ['GET', 'POST'],
       allowedHeaders: ['Content-Type', 'Authorization']
   }));
  1. Ensure Proper Headers: In your fetch request, avoid setting Access-Control-Allow-Origin in the headers. This header is meant to be set by the server, not the client. Remove it from your fetch request.
3

I tried this, but I’m still getting a CORS error. I also added a console.log to check if my middleware was executing, but it didn’t print anything. This means the request is likely being handled elsewhere before reaching my middleware. Since I’m using the Shopify Express template, it seems that one of the existing middlewares in the template is executing first and preventing mine from running.

4

Is this the template you’re using? GitHub - Shopify/shopify-app-js

5

No i am using this template

6

And the app is installing correctly, correct? This error is only happening in the context of a checkout extension? Have you reviewed this doc: Configuration

UI extension requests made to the App Proxy of password protected shops is not supported.

Is the store password protected?

1 Like