Cloudflare Worker Headers breaking Add to Cart Button-CodePudding

After a few hours of digging, I have narrowed down why the "Add to Cart" button for Woocommerce is no longer working; my cloudflare worker! The complete code is below, however the issue is in regards to the header information responsible by:

const response = await fetch(request)

 return new Response(html, {
        headers: response.headers

I have tried to modify the headers instead, but then the international styling does not work at all. Experimentation is here: https://ellasbubbles.com/product/ella-shower-column-kit-for-walk-in-tub-deck-mount-faucets/. If you are inside of U.S/CA you will not see this issue because of the IF statement.

Is there something wrong with the headers? Should I modify them in a different way? Should I insert my css in a different way?

Cloudflare Worker:

addEventListener('fetch', event => {
    event.passThroughOnException()
    event.respondWith(handleRequest(event.request))
})

/**
 * Fetch and log a given request object
 * @param {Request} request
 */
async function handleRequest(request) {
    const country = request.cf.country
    if (country != 'US' && country !='CA') {
    const response = await fetch(request)
    var html = await response.text()
    
    // Inject scripts
    const customScripts = '<style type="text/css">custom css here</style></body>'
    html = html.replace( /<\/body>/ , customScripts)

    // return modified response
    return new Response(html, {
        headers: response.headers
    }) 
}
}

I have tried running the code like this, and after clicking "Add to Cart" - the entire page goes blank, because there is nothing inside of the after the "add to cart" button is clicked

addEventListener('fetch', event => {
    event.passThroughOnException()
    event.respondWith(handleRequest(event.request))
})

/**
 * Fetch and log a given request object
 * @param {Request} request
 */
async function handleRequest(request) {
    const country = request.cf.country
    if (country != 'US' && country !='CA') {
    const response = await fetch(request)
    var html = await response.text()
    
    // return modified response
    return new Response(html, {
        headers: response.headers
    }) 
}
}

CodePudding user response：

I see a few problems here.

if (country != 'US' && country !='CA') {

It looks like the whole handler function doesn't run if the country is US or CA, which means no response will be sent.

    // return modified response
    return new Response(html, {
        headers: response.headers
    })

Here, you're copying the headers from the original response, but you are not copying other properties, such as the status code. Try this instead:

    // return modified response
    return new Response(html, response)

Here, all the properties of response will be copied over, except for the body which comes from html.

Another problem is that you are modifying all responses, even if they are not HTML. E.g. you might be accidentally modifying JSON API responses. Worse, if you process a binary file, like an image, then this code will almost certainly corrupt it, because it converts the binary into text. To avoid that, you might want to check the Content-Type header before modifying, like:

    const response = await fetch(request)
    const type = response.headers.get("Content-Type") || "";
    if (!type.startsWith("text/html")) {
      // Not HTML, don't modify.
      return response;
    }