App block Cors error calling backend

[quincyo]

I have an app block that I'm testing in a test development store, I'm trying to make a simple fetch call to my external backend application but I keep encountering a cors error:

Access to fetch at 'my-backend-request' from origin 'https://extensions.shopifycdn.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

The code in my react app looks like this: 

useEffect(() => {

const fetchShipments = async () => {

console.log('Fetching shipment data...');

setLoading(true);

const requestOptions = {

headers: {

}

}

try {

const response = await fetch('my-backend-request', requestOptions)

I've setup my cors configuration to allow for request from the url, I'm also using a ngrok tunnel url but have allowed requests from that url as well, the call works fine in postman when I set the origin to be coming from https://extensions.shopifycdn.com, but does not work in the browser.

[BStubbs]

Use an App Proxy instead

https://shopify.dev/docs/apps/build/online-store/display-dynamic-data#add-an-app-proxy

[quincyo]

I still seem to be getting a Cors error, something do to with the preflight not being able to be redirected