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.