CODEWITHSUNDEEP
shopifyshopify-app
Navdeep
Navdeep

Reputation: 1

Getting error CORS failed in my Shopify App Proxy

I am trying to call app proxy but getting error in dev tools -> Network Response body is not available to scripts (Reason: CORS Failed)

I have already tried setting my header as * as well as headers: { "Content-Type": "application/json", 'Access-Control-Allow-Origin': https://${storeDomain}.myshopify.com, } url in my fetch is https://${storeDomain}/apps/my-subpath and proxy url in app proxy is cloudflare tunnel with api/myfile.jsx ( which is accesible from my browser to ensure it is running)

Any idea what am I missing

I have already tried setting my header as * as well as headers: { "Content-Type": "application/json", 'Access-Control-Allow-Origin': https://${storeDomain}.myshopify.com, }

Upvotes: 0

Views: 17

Answers (1)

Developer Nilesh
Developer Nilesh

Reputation: 568

Solution for the CORS issue in your Shopify App Proxy:

  1. On your backend (API) server, add these CORS headers:

    app.use((req, res, next) => { res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS'); res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization'); if (req.method === 'OPTIONS') { return res.status(200).end(); } next(); });

  2. In your frontend fetch request, remove the Access-Control-Allow-Origin header (it should only be set server-side):

    fetch(https://${storeDomain}/apps/my-subpath, { method: 'GET', credentials: 'include', headers: { 'Content-Type': 'application/json' } })

Upvotes: 0

Related Questions