2

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?

2
  • What do you want to achieve for the route "example.com/test" ? Redirect, or just a 200 response. What should be displayed in the browser for that route? Commented Sep 27, 2019 at 8:46
  • /test would be a legitimate route, so I'd like it to return 200 when /index.html gets served up for it Commented Sep 27, 2019 at 12:02

3 Answers 3

3

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
}
Sign up to request clarification or add additional context in comments.

Comments

1

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

Comments

1

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>

6 Comments

Thanks. The /test route should be found, it serves up all requests with index.html for my SPA. Your example seems to fully redirect all requests to / (removing the URL path)
what should test route return then?
@Titan if you describe simple case scenario, two of us can resolve this quickly I beleive.
I have a Vue SPA on S3. S3 is set to send all requests to /index.html (including "error documents"). The root of the website returns the app and a 200 code for the document. /test returns the app as expected, but in the network tab when looking at the response code of the document it's 404. I believe this is because S3 is treating /test as a missing asset and sending back that error code, despite correctly serving it up with index.html. This is usually solved in Cloudflare as I described in screenshots above. I need to know the equivalent in Cloudfront.
I beleive then that this post will solve your issues. medium.com/@joecrobak/…
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.