FROM CACHE - en_header

Sending data from frontend to backend using fetch() in Shopify app

11 1 1

I'm developing an embedded app for Shopify using node.js and react.js. In this app, I'm creating a scripttag when the app is installed, and that scripttag, waits for a wishlist button to be pressed and stores the customer and product id, whenever the clients press the "add to wishlist" button.
Now, I need to store these variables in a database and I cannot do it on the client-side. Therefore, I'm trying to send them to my app using the fetch() function. Also, I'm using ngrok for my HTTPS requests.

1. If I use headers in my request, it gives me **"Access to fetch at '' from origin '' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request."**
2. If I don't use headers, It asks me to make the mode"no-cors" which I did.
3. Now, I'm getting this error: **"shop_events_listener-68ba3f1321f00bf07cb78a03841621079812265e950cdccade3463749ea2705e.js:1 GET 400"**

So, please suggest, how should I send my data back and forth in Shopify app.


function addWishList(customer, productid){
var wishlist1 = {
"customer" : customer,
"pid": productid
const response1 = fetch(``, {
method: 'POST',
mode: "no-cors",
body: JSON.stringify(wishlist1)})
// const responseJson = response1.json();
// const confirmationUrl =
// console.log(responseJson);

console.log('adding item to the wishlist!!')


fetch(``, {
method: "GET",
mode: "no-cors"
.then(response => response.json()) 
.then(json => console.log(json))
.catch(err => console.log(err));


const dotenv = require('dotenv');
const Koa = require('koa');
const next = require('next');
const { default: createShopifyAuth } = require('@shopify/koa-shopify-auth');
const { verifyRequest } = require('@shopify/koa-shopify-auth');
const session = require('koa-session');
const fetch = require('node-fetch');
const scriptTag = require('./server/scriptTag');
//var koaRouter = require('koa-router');

//const Cryptr = require('cryptr');

const {default: graphQLProxy} = require('@shopify/koa-shopify-graphql-proxy');
const {ApiVersion} = require('@shopify/koa-shopify-graphql-proxy');

const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

const { SHOPIFY_API_SECRET_KEY, SHOPIFY_API_KEY } = process.env;

app.prepare().then(() => {
const server = new Koa();
server.use(session({ secure: true, sameSite: 'none' }, server));
server.keys = [SHOPIFY_API_SECRET_KEY];
server.use(graphQLProxy({version: ApiVersion.October20}));
scopes: ['read_products', 'write_products', 'write_script_tags', 'read_script_tags'],
async afterAuth(ctx) {
const { shop, accessToken } = ctx.session;
ctx.cookies.set('shopOrigin', shop, {
httpOnly: false,
secure: true,
sameSite: 'none'

await scriptTag(ctx, accessToken, shop);
// const confirmationUrl =;


server.use(async (ctx) => {
await handle(ctx.req, ctx.res);
ctx.respond = false;
ctx.res.statusCode = 200;

server.listen(port, () => {
console.log(`> Ready on http://localhost:${port}`);
Reply 1 (1)
Shopify Partner
2 0 2

Hi Zahraazeem98,

Did you ever figure this out? Also, do you have any issues processing the response from your fetch? Specifically, I don't see a body being returned even though my api is definitely returning it. It seems like it's being stripped somewhere.