Access Denied when requesting route after authentication - AWS Cloudfront and AWS S3-CodePudding

I have a S3 bucket of a Vuejs application with the content shown in the link s3 bucket content

To deliver that content i have a distribution in Cloudfront. To make that distribution secure, i created a OAI to associate into Cloudfront distribution and S3 bucket. ** The distribution origin is the bucket not the bucket domain. So when i request the Cloudfront domain the login page is shown, after click on the login button an OIDC flow is started, and when the Callback router is requested is showed a page with acess denied as the link show acess denied. To try to get around this problem I created a function in CLoudfront that checks the url and renders the index.html, but that didn't work. How can i fix this? Remembering that I don't have a subdirectories with index.html inside them. I have an index.html that loads the js scripts that are built in the vue process

CodePudding user response：

You might want to consider adding a web page redirect rule in your S3 that will serve the index.html file if a logical route (Virtual, belongs to the vue router and not a physical file) is hit so that your CF won't serve 404s. Here is a link that explains more about S3 redirect rules.

You can try adding this code on your S3 bucket's redirection rule:

<RoutingRules>
  <RoutingRule>
    <Condition>
      <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
    </Condition>
    <Redirect>
      <HostName>domain.com</HostName>
      <ReplaceKeyWith>index.html</ReplaceKeyWith>
    </Redirect>
  </RoutingRule>
</RoutingRules>

CodePudding user response：

I solved the problem registering an Error pages in Cloudfront distribution, in my case a 403 error code, so when 403 is launched the Cloudfront redirects to index.html, and from there vue knows what do. btw i found the solution here answer