CODEWITHSUNDEEP
amazon-s3cloudflare
Titan
Titan

Reputation: 6040

S3 hosted website with Cloudflare returns 404 status code for any route

I have an S3 hosted website working well behind Cloudflare with the following:

ss1

example.com/ works fine

example.com/test also works but the document itself in the network tab is returning 404, naturally, because /test doesn't exist on S3.

This is a problem for SEO, how do I configure Cloudflare to treat 404s as 200s?

In Cloudfront I usually do this:

ss2

But I can find no corresponding configuration in Cloudflare. Will this have to be done in a Cloudflare worker? What did people do before Workers existed?

Upvotes: 2

Views: 1751

Answers (3)

Davel_AG
Davel_AG

Reputation: 136

This is what I did to fix the issue:

Go to => Your S3 Bucket > Properties > Static website hosting

under the Error document input, I added the index.html enter image description here

it is still showing the error in the browser console, however the 404 is gone and the site works

the bad news is that in cloudflare I had to stick to "Flexible" enter image description here

My Settings React with Standard Route setup enter image description here

Upvotes: 1

Titan
Titan

Reputation: 6040

Turns out people just didn't host on S3 with Cloudflare before workers, and if they did, they didn't care/notice that their routes would return 404.

Anyway, this is the solution with Cloudflare workers to force the return code of 200:

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

async function fetchAndApply(request) {
  let originalResponse = await fetch(request)

  const contentType = originalResponse.headers.get("Content-Type")

  // Only bother with index pages (not assets)
  if (contentType && contentType.includes("text/html")) {

    // Force 404's from S3 to return as 200 to prevent Google indexing issues
    let response = new Response(originalResponse.body, {
        ...originalResponse,
        status: 200, 
        statusText: 'OK'
      }
    )

    // Don't cache index.html
    response.headers.set('Cache-Control', 'max-age=0')

    return response
  }

  return originalResponse
}

Upvotes: 3

titus
titus

Reputation: 426

I beleive you can use this approach from the AWS docs. https://docs.aws.amazon.com/AmazonS3/latest/dev/how-to-page-redirect.html Example #3 at the bottom of the document page.

This is S3 bucket for the demo.

EDIT: removed the URL, it served the purpose that was usable only to author of the question.

Here is short example. Which will redirect to "home" if not found.

<RoutingRules>
<RoutingRule>
<Condition>
  <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals >
</Condition>
<Redirect>
  <HostName>BUCKETNAME.s3-website-eu-west-1.amazonaws.com</HostName>
  <ReplaceKeyWith></ReplaceKeyWith>
</Redirect>
</RoutingRule>

Upvotes: 1

Related Questions