Amplify-console: Access Denied error after deploying Vue.js application

[faizanbashir]

I am trying to deploy a vue.js application, once the deploy completes I am getting the below error:

<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>69F14474972D101F</RequestId>
<HostId>
OUeLFCflVlOsrmr9dklT/JzhiMYpr49zIW7X9WflA0XpMrHeTI9rO7P4DasivogoEw2AVCzLTT8=
</HostId>
</Error>

[rama3319]

We got a similar issue. in our case, index.html was under /xyz/xyz/ subdirectory path instead of being at root level. To fix it we went inside the directory where index.html is present & did a zip. deployed the zip file and we are able to access it.

[Joycehao19]

Hi @faizanbashir , sorry that you have this issue. If you use manual deploy, can you try @prasaddattu478 comment? If those steps won't solve your issue, would you mind to tell us:
Which amplify cli version did you use? What is your appId and region?

[faizanbashir]

@Joycehao19 I deployed it from the amplify console for continuous deployment, there is no amplify cli involved. Also when I deploy the same vue.js app using amplify cli it works perfectly but using the amplify console it is giving me the aforementioned error. No amplify backend services are used in this application.

[ganipcanot]

@faizanbashir Can you share your build settings? There might be something wrong with how you are generating your output/artifacts folder/directory.

[fsthomas]

I'm having a similar issue with a React app's images directory. They're all coming through as AccessDenied.

[jonkelling]

I am also having trouble with this. index.html works but bundle.js comes through as AccessDenied.

[faizanbashir]

@ganipcanot Right now the build is failing for me, here is the amplify.yml build file:

version: 0.1
env:
  variables:
    NODE_ENV: production
    SOME_VAR_FOO: bar 
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
        - npm install -g @vue/cli-service @vue/cli-plugin-babel @vue/cli-plugin-eslint @vue/cli-plugin-pwa babel-eslint eslint eslint-plugin-vue node-sass sass-loader vue-template-compiler webpack webpack-cli webpack-dev-server
    build:
      commands:
        - export $(cat .env.staging)
        - npm install
        - vue-cli-service build --mode production
    postBuild:
      commands: 
  artifacts:
    baseDirectory: .
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Even after installing using both npm and yarn vue-cli-service is not found, so I manually tried to install the package and its dependencies and that also does not work and npx vue-cli-service also does not seem to work.

Earlier I hadn't added the build command thus I was getting an access denied error now due to the vue-cli-service not found the build fails.

[ahasna]

@faizanbashir I had a similar issue where I couldn't access any routes and was getting AccessDenied.
the only change I did is to change a 404 Redirect to 404 Rewrite then all routes worked.
Hope this helps!

[faizanbashir]

@ahasna Thanks for the suggestion will try it out once the build works properly. Right now I am not able to run the build commands properly even though all the required packages are installed.

[2manoj1]

Same issue with Next.js app. After deploy got access denied error (403)
build settings

version: 0.1
backend:
  phases:
    build:
      commands:
        - '# Execute Amplify CLI with the helper script'
        - amplifyPush --simple
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

[swaminator]

@2manoj1 we have an issue with hidden folders not deploying right now which we have prioritized a fix for. One way to unblock is to change the folder which you deploy to one without a .

[2manoj1]

@swaminator thank you. Able to deploy Nextjs frontend only useing
next build && next export. Its out folder. But if I have Nextjs API how we will deploy in Amplify console?

[gauravhanda25]

@swaminator thank you. Able to deploy Nextjs frontend only useing
next build && next export. Its out folder. But if I have Nextjs API how we will deploy in Amplify console?

I did same for frontend. My baseDirectory is out but still getting AccessDenied

[gauravhanda25]

@swaminator thank you. Able to deploy Nextjs frontend only useing
next build && next export. Its out folder. But if I have Nextjs API how we will deploy in Amplify console?

@2manoj1 Can you provide your amplify.yml after success?

[2manoj1]

@gauravhanda25 --> in package.json -> "export": "next build && next export".

version: 0.1 backend: phases: build: commands: - '# Execute Amplify CLI with the helper script' - amplifyPush --simple frontend: phases: preBuild: commands: - yarn install build: commands: - yarn run export artifacts: baseDirectory: out files: - '**/*' cache: paths: - node_modules/**/*

**

build:
commands:
- yarn run export
artifacts:
baseDirectory: out

**

Github Link sample example-> ToDoList

[gauravhanda25]

@gauravhanda25 --> in package.json -> "export": "next build && next export".

backend:
  phases:
    build:
      commands:
        - '# Execute Amplify CLI with the helper script'
        - amplifyPush --simple
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      commands:
        - yarn run export
  artifacts:
    baseDirectory: out
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

**

build:
commands:

• yarn run export
  artifacts:
  baseDirectory: out

**

Github Link sample example-> ToDoList

@2manoj1 So you made it work with amplify cli. So it didnt work with amplify console ?

[2manoj1]

@gauravhanda25 in Amplify console -> build settings

in package.json -> script changes
"export": "next build && next export".

[gauravhanda25]

@gauravhanda25 in Amplify console -> build settings

in package.json -> script changes
"export": "next build && next export".

Still no luck. Deployment is always green tick but Access Denied is always there.
https://master.d1pgdow2brm58j.amplifyapp.com/

[2manoj1]

@gauravhanda25 Can we connect in Skype? So I will help you.

[Sut3kh]

Same problem here with the connected branch frontend build.

We have 4 projects using amplify and only 2 of them have this problem. The 2 that work do not have an amplify backend - which implies there is some hidden or default config being triggered?

1 of the projects with the 403 problem has exactly the same amplify.yml as the 2 that work (no backend section) so just a manually pushed backend appears to be enough to trigger it (no hosting, just auth & api)

[shide1989]

ahd the same issue, went to Amplify console to add a redirect rule on my VueJS application that works perfectly :

[gvelez-postmates]

Ah! the 404 (rewrite) worked for me! I had been getting the same error, and had been following some other suggestions for a 200 rewrite rule (that make sense to me), but the 404 rule

</^((?!\.(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$).)*$/>  /index.html 404 (Rewrite)   United States

worked! no more 403..

thank you, this had been driving us nuts for some time!

[Joycehao19]

Hello @Sut3kh , do you still face this issue? did you try adding rewrite rule?

[plotka]

We got a similar issue. in our case, index.html was under /xyz/xyz/ subdirectory path instead of being at root level. To fix it we went inside the directory where index.html is present & did a zip. deployed the zip file and we are able to access it.

I was having the same 403 error and the issue was that the index.html was not in the root folder. Thanks, @rama3319

[abarrdev]

For anyone having this issue with React, the 404 rewrite worked for me as well. Thanks @shide1989 !

[swaminator]

Closing this issue - we are going to update the Create app flow to automatically create a 404 rewrite instead.

[kewp]

This has been covered before but it wasn't clear to me so I want to reiterate:

If you are doing a _manual deploy_ make sure you don't zip the folder but rather the _files_ in the folder. https://docs.aws.amazon.com/amplify/latest/userguide/manual-deploys.html. See the note half way down about the access denied message

[Darktofts]

Hi I am getting the error 403, as many have. I deployed the code via the console . Using a bitbucket connection

I've added both a 202 and 404 rewrite rule. for <*> to /index.html

I'm getting

<Error> <Code>AccessDenied</Code> <Message>Access Denied</Message> <RequestId>**</RequestId> <HostId>*******</HostId> </Error>

Did anyone fix this another way ?

[Bhavikpatel576]

For me, I had to look through my build logs to see if I was properly serving up the index.html file. Made adjustments to point to the correct directory and it worked.

[Njivaniaina]

Same problem,
I made the redirection,
I no longer have access problems, but all my styles and images don't work anymore.

PS: the problem appeared after adding cognito in the configuration

[tkwong94]

Although the issue is already closed but just in case someone else need it, I am leaving my solution here.

My problem: Getting AccessDenied XML
Background: Nuxt universal(SSR/SSG) application, using frontend CI connected to a gitlab project (all green ticks during deployment), having backend env too
Solution: updated the build setting on console, make sure the baseDirectory is dist

[khushal87]

Any solution for react 403?

[shide1989]

Small update here using Gatsby+React :
We ended up removing the <*/> redirection to the index.html.
It seem that this rule rewrites any request to the index.html and causes assets not to work anymore,
which breaks everything.

Now our rewrite rules only have the main 301 redirects to the main website URL (with www.example.com),
and 200 rewrites for a few subpaths : i.e /profile -> /profile/index.html -> 200 (Rewrite)
So that refreshing pages on these subpaths doesn't show the home page

@khushal87 I suggest you check your bulid settings, as 403 are usually returned when there are no assets/files available

[TopPython]

Use this rule
[
{
"source": "",
"target": "/index.html",
"status": "200",
"condition": null
}
]

[pvsvamsi]

@Liguo-Ma Your rule has worked. But can you explain what this rule does?

[christophrrb]

If you use the Vue cli with npm run build, the index.html file might not be in the dist folder. To account for that, the baseDirectory for amplify.yml can be set to the root directory, like ./, so that Amplify finds it.

[TopPython]

Hi @pvsvamsi
Sorry for late
Please check https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html

[tonykaram1993]

We had the same issue, and we were trying to follow the amplify documentation: https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa (Redirects for Single Page Web Apps (SPA)).

It did not work, but instead of: </^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/> we used </^((?!.(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$).)*$/> and it worked perfectly.

I hope this helps someone else.