Custom Header from Network Request not being retrieved with fetch API

Question

I am receiving a custom header from CloudFront to my flask server, and want to pull the value off the header to display on the site. I know to do so requires CORS, which I believe I've configured properly across both sites as the requests return "Access-control-allow-origin: *"

The issue is this: I'm receiving several network requests when I push the button calling the cloudfront function, and using the fetch api does not give me the headers from the request containing the custom header I need.

There's a lot of moving parts, so I will try to include the relevant ones and can provide more if needed. The one below is the javascript called within the html file in my flask app.

<script>
function fibonacci() {
     var n = document.getElementById('fibCFInput').value;
     console.log("testing.." + n)
     //fetch('/fibonacci/' + n) //NOTE: neither fetch command has worked for me.
     fetch("<cloudfront url>/fibonacci/" + n)
     .then(response => {

     response.headers.forEach((value, name) => {
     console.log(`${name}: ${value}`);
     });

     const fibval = response.headers.get("Fibval");
     console.log(`fibval value: ${fibval}`);
     })
}
</script>

The one below here is the app route for the function call.

@app.route("/fibonacci/<int:value>", methods=['GET', 'OPTIONS'])
def fibonacci(value):
        url = f"<cloudfront url>/fibonacci/{value}"
        return redirect(url, code=302)

Here's the cloudfront function and all headers it returns. I've had to wrangle with it so some of it has questionable readability issues but CloudFront is very finnicky with what it accepts and doesnt.

import cf from 'cloudfront';

async function handler(event) {
    const url = event.request;
    const pathSegments = url.uri.split('/')
    console.log(pathSegments)
    const key = pathSegments[2] //returns fib number from input
    console.log(key)
    var result = fibFunc(parseInt(key))
    const mainweburl = "http://fakeURL.com:portnumber/"
    const all = "*"
    var response = {
        statusCode: 302,
        statusDescription: 'Found',
        headers: {
        'access-control-allow-origin': {"value": all},
        "location": { "value": mainweburl},
        'fibval': {'value': result.toString()},
        }
    };
    return response;
}

Additionally, I've included a screenshot of my developers tools to showcase what I'm seeing.image of developer tools

I've attempted several ways of printing it out and messing with variables to see if I can navigate to the other request, and double-checking CORS documentation to make sure it works. I'm brand new to this skillset, so please forgive any egregious issues. The focus of this exercise is not security, so there are obvious holes in it and for that reason i've scrubbed any PII out of this. However, there is a focus on performance, so I cannot use XMLHttpRequest because as far as I know it resends the request, which will affect performance metrics.