How do I troubleshoot URI rewrite issues when I use CloudFront Functions?

Resolution

You didn't associate the CloudFront function with the correct cache behavior

Verify that you associated the CloudFront function with the correct cache behavior and path pattern settings for the requests that you want to modify. If multiple cache behaviors match the same requests, then CloudFront uses the one with the highest precedence.

Complete the following steps:

1. Open the CloudFront console.
2. In the navigation pane choose Distributions, and then select your distribution.
3. Choose the Behaviors tab, and then review the path pattern for each behavior.

The URI path doesn't match after the CloudFront function execution

Check your CloudFront Functions logs for "URI path mismatch" errors. If you received this error, then the rewritten URI path doesn't match the expected format after the function execution.

Review the CloudFront function code to make sure that it correctly changes the URI path. The URI path can't contain incorrect characters and must include a leading forward slash (/).

Example URI path:

/analytics.js/v1/xT5Qstsd35FL5WgikA1ABwyCQUDDYPHx/analytics.min.js';

For more information, see View CloudFront and edge function metrics.

The SSL certificate doesn't match the origin and requested domain

An issue occurs when the CloudFront function rewrites the host header value, and it no longer matches the SSL certificate domain. The CloudFront function then forwards the request to a domain that's different from the domain that's in the SSL certificate.

To resolve this issue, modify the CloudFront function to rewrite the host header value to match the origin's SSL certificate domain.

For example, if the origin's SSL certificate uses example.com but the requested domain is www.example.com, then add the following code to the CloudFront function:

request.headers['host'] = ['example.com'];

The host header now rewrites to example.com before it forwards the request to the origin.

The URI is incorrect in SPA deployments

If you deployed a single-page application (SPA) through CloudFront, then check for requirements to rewrite requests to serve the index.html file except for static assets. For example, the requests don't check for static assets such as JavaScript or CSS files.

Use the following code in the CloudFront function to check for a file extension or trailing slash in the URI:

function handler(event) {
    var request = event.request;
    var uri = request.uri;

    // Check whether the URI is missing a file name or a file extension.
    if (uri.endsWith('/') || !uri.includes('.')) {
        request.uri = '/index.html';
    }

    return request;
}

If the request is from the SPA, then it rewrites the URI to /index.html. If the request isn't from the SPA, then the URI doesn't change and allows requests for static assets to pass through unmodified.

The slash is missing from the URI when you change a URL

If you use a CloudFront function to shorten or change URLs, then add a forward slash to the beginning of the URI to accept the URL request.

Example CloudFront function to shorten the URL:

request.uri = '/' + newShortUrl;
return request;

Related information

Redirect to a new URL in a CloudFront Functions viewer request event

Rewrite a request URI based on KeyValueStore configuration for a CloudFront Functions viewer request event