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

[zahraazeem98]

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 'https://f865bfefa4b2.ngrok.io/data.js' from origin 'https://tesrun.myshopify.com' 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 https://f865bfefa4b2.ngrok.io/auth 400"**

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

```scripttag.js```

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

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

```data.js```

fetch(`https://f865bfefa4b2.ngrok.io/scripttag.js`, {
method: "GET",
mode: "no-cors"
})
.then(response => response.json()) 
.then(json => console.log(json))
.catch(err => console.log(err));

```server.js```

require('isomorphic-fetch');
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');



dotenv.config();
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}));
server.use(
createShopifyAuth({
apiKey: SHOPIFY_API_KEY,
secret: SHOPIFY_API_SECRET_KEY,
scopes: ['read_products', 'write_products', 'write_script_tags', 'read_script_tags'],
async afterAuth(ctx) {
const { shop, accessToken } = ctx.session;
console.log(shop);
console.log(accessToken);
ctx.cookies.set('shopOrigin', shop, {
httpOnly: false,
secure: true,
sameSite: 'none'
}) 

await scriptTag(ctx, accessToken, shop);
// const confirmationUrl = responseJson.data.scriptTagCreate.scriptTag;
console.log(`hi`);

ctx.redirect('/');
},
}),
);


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

server.listen(port, () => {
console.log(`> Ready on http://localhost:${port}`);
});
});

[mmwasiel]

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.