Sending data from frontend to backend in shopify

Question

I'm developing an app with node and react. In this app, I have created a scriptTag using the fetch function to get customer id and product id whenever a specific button is pressed. Now when I have fetched that data, I want to store it in my firebase database, which I cannot import in my script tag file because it's on the front end. Therefore, I need to send the data from my frontend to the backend of the app but I'm confused that if I use the fetch function to make POST and GET requests, what URL should I use? Moreover, can the fetch function even post the variable values or not?

Scripttag.js

const header = $('header.site-header').parent();

header.prepend('<div>Hello this is coming from the public folder </div>').css({'background-color':'orange', 'text-align': 'center'})

function addWishList(customer, productid){
/*
  fetch(`url`, {
    method: 'POST',
    headers: {
      'Content-Type': ,
      "X-Shopify-Access-Token": ,
    },
    body: 
    }})
  })

*/

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

function removeWishList(){
    console.log('removing item from the wishlist!!')
}
 var wishbtn = document.querySelector('.wishlist-btn')
 wishbtn.addEventListener('click', function(){
     if(this.classList.contains('active')){             //condition to check if the button is already pressed
        removeWishList();
        this.classList.remove('active');
        this.innerHTML = 'Add to wishlist'
     }
     else{
        var customer = wishbtn.dataset.customer;
        if(customer == null || customer == ''){
            console.log('Please log in to add this item to your wishlist')
        }
        else{
            var productid = wishbtn.dataset.product;
            this.classList.add('active');      //when the user presses add to wishlist button, it add active to the button's class
            this.innerHTML = 'Remove from wishlist'
            addWishList(customer, productid);
        }
     }
     
 })

Answer 1

The best way to send data from the frontend to the backend is to use the Proxy option that is provided in the Shopify Partner Dashboard.

This way you can stay in the Shopify environment since it will pass specific arguments to the request that you can check if the request is truly coming from Shopify and you will have one less worry about securing it from outside requests.

So for example you will make a fetch request to /apps/YOUR_CUSTOM_PATH and this will proxy to your URL https://example.com/custom_path where you will handle the request.

You can see more info here: https://shopify.dev/tutorials/display-data-on-an-online-store-with-an-application-proxy-app-extension

You can create a public route for your app as well that can be requested from everywhere and allow for CORS but it's usually more work to do so... so pick your poison.

Have in mind that when creating a proxy page you need to reinstall the app on the store to take effect.

PS: Don't ever use the Access Token in the frontend, that should be never present in the frontend. The AccessToken is only back-end way of communicating with the API!