Help Needed with CloudFront Function for IP and Origin-Based Access Control

Hello everyone,

I'm really struggling with a CloudFront function and could use some help. I've attached this function to the viewer request behavior of my distribution (cdn.example.com). The goal is to only allow access from my specific IP address or genuine users of my websites, and redirect everyone else to my main site (https://example.com).

Here's the CloudFront function I'm using:

'use strict';

function handler(event) {
    const allowedIPs = ['192.0.2.1'];
    const domain = 'example.com';
    const protocol = 'https';
    const viewerIp = event.viewer.ip;

    // Ensure response object exists and set CORS header
    event.response = event.response || { headers: {} };
    event.response.headers["access-control-allow-origin"] = { value: `https://${domain}` };

    // Check if the request is from an allowed IP address
    if (allowedIPs.includes(viewerIp)) {
        return requestWithHeaders(event.request, domain);
    }

    const originHeader = event.request.headers.origin;
    const userAgent = event.request.headers['user-agent'] ? event.request.headers['user-agent'].value : '';

    // Function to check user-agent
    const isValidUserAgent = () => {
        const requiredAgents = [
            'Mozilla/5.0',
            'AppleWebKit/537.36',
            'Chrome/126.0.0.0',
            'Safari/537.36'
        ];

        return requiredAgents.every(agent => userAgent.includes(agent));
    };

    // Check if the request is from your domain with a valid user-agent
    if (
        originHeader &&
        originHeader.value.startsWith(`${protocol}://`) &&
        originHeader.value.endsWith(domain) &&
        isValidUserAgent()
    ) {
        return requestWithHeaders(event.request, domain);
    }

    // Redirect all other requests to example.com
    return {
        statusCode: 307,
        statusDescription: 'Temporary Redirect',
        headers: {
            location: { value: `https://${domain}` }
        }
    };
}

// Helper function to return request with updated headers
function requestWithHeaders(request, domain) {
    request.headers = request.headers || {};
    request.headers["access-control-allow-origin"] = { value: `https://${domain}` };
    return request;
}

Issue: When I try to access the distribution from https://www.example.com using Edge Browser (latest version) on Windows from a random IP address (not whitelisted), it redirects me to https://example.com instead of allowing access. This should work because the request is coming from my domain.

[N.B.: To keep the post genuine for the community, I have redacted the IP Address and Domain Name]

Edit 1: Requests from the allowed IP addresses are successfully accessing the resource. The issue occurs when a user with a different IP address (not in the allowed list) tries to access resources from https://www.example.com. The site is making the request from Microsoft Edge (an allowed user-agent), so the origin value should match https://*.example.com, which meets the conditions. Instead, the response redirects to https://example.com.

I also don’t know how to enable logs for a CloudFront function attached to a distribution. Despite my search, I couldn't find a way. Any resources or guidance on this would be incredibly helpful.

I'm really at a loss and any help or suggestions would be greatly appreciated. Thank you so much for taking the time to read this and help me out.