CODEWITHSUNDEEP
javascriptamazon-web-servicesvue.jsaxiosvue-cli
RasmusN
RasmusN

Reputation: 168

Redirecting backend calls in Vue application

I am trying to deploy my website written in Vue to a static webhosting service (AWS S3).

I have been using the bencodezen boilerplate which seems to be generated using Vue-CLI. The boilerplate comes with a pre-configured development server such that you can redirect the backend calls (using axios) to either a mock backend or to a production backend:

vue.config.js

module.exports = {
    [...]
    // Configure Webpack's dev server.
    // https://cli.vuejs.org/guide/cli-service.html
    devServer: {
    ...(process.env.API_BASE_URL
      ? // Proxy API endpoints to the production base URL.
        { proxy: { '/api': { target: process.env.API_BASE_URL } } }
      : // Proxy API endpoints a local mock API.
        { before: require('./tests/mock-api') }),
    },
}

All calls to myurl.com/api/* will be directed to either the mocked backend or the API_BASE_URL if such is defined. This works fine while using the vue-cli-service serve development server but I'm failing to understand how to translate this to AWS S3, or any other webserver suited for production. If I try to make a login, post-request I get the following response from AWS:

405 Method Not Allowed

Indicating that the call was never redirected (AWS S3 doesn't allow POST calls).

Is it possible to redirect the API-calls directly from the web browser to the backend without going through the webserver? If not, how to I setup my production webserver in such a ways that the calls to myurl.com/api/* are automatically forwarded?

Upvotes: 0

Views: 1200

Answers (1)

AFOC
AFOC

Reputation: 844

In the production environment (where devServer config does not apply) you need to manually handle the URLs, using some logic to figure out where the requests need to go. If the backend is not on the same host as the frontend, something like this:

const apiPath = process.env.NODE_ENV === 'development' ? '/api' : 'https://mybackendurl.com/api';
axios({
  url: `${apiPath}/login`,
  method: 'post',
  headers: myHeaders,
  // etc
})

You probably won't want to do that before every API call so I recommend making some sort of API service you can import and plug into axios. Then you can do something simple like url: API.Login()

Upvotes: 1

Related Questions