'AWS Amplify redirect middleware NuxtJs requests not working

I tried to deploy vuestorefront (nuxtjs app) into AWS Amplify according https://docs.amplify.aws/guides/hosting/nuxt/q/platform/js/

My amplify.yml contains:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      commands:
        - yarn run generate
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

And I set next data into redirect & rewrites section:

[
    {
        "source": "/<*>",
        "target": "/index.html",
        "status": "404-200",
        "condition": null
    },
    {
        "source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>",
        "target": "/index.html",
        "status": "200",
        "condition": null
    }
]

However, Requests sent to Middlerware generate a "301" with "cancelled" like next example: Redirect error

I have a form into page.vue with middleware call:

import oauthToken from '~/api/getToken';
...
  methods: {
    singIn(e) {
      oauthToken(this.email, this.password);

File ~/api/getToken have an axios to call middleware:

import axios from 'axios';

const oauthToken = (email, password) => {
  let result;
  axios({
    method: 'GET', url: '/oauth2.js',
    headers: { email, password, },
  })
    .then((res) => {
      console.log(JSON.parse(JSON.stringify(res.data.access_token)));
    })
    .catch((err) => console.log(err));

  return result;
};

export default oauthToken;

/oauth2.js GET (in server-middleware/custom-features.js):

app.get('/oauth2.js', (req, res) => {
...
      res.status(200).send(response.data);
}



Solution 1:[1]

Vue Storefront requires an active node server, and it's not yet supported to do Lambda deployment yet. We are working on bringing this solution to the framework.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1