HTTP Requests

In this section of the tutorial we'll look at Axios and how to organize ajax calls to our backend server API...

Install Axios HTTP Client

$ npm install axios --save-dev

First let's create a Vue plugin so we can make Vue.http or from within components as this.$http calls using Axios:

http/index.js

import axios from 'axios';

export default {

  install (Vue, options) {
    Vue.prototype.$http = Vue.http = axios.create()
  }
}

Organizing Requests to Backend Server API

It's better to abstract API calls to your backend server so that components can add the bits of code that better pertain to its business domain. And it's nice to keep all these API calls together so a clearly visible list of all the API endpoints is established (similiar to how the routes files collects the external API of your app, this would collects the API to your backend). Let's list all the API endpoint calls in a file. For example, a component may want to make an API call getFriends:

http/api.js

import auth from '@/auth/helpers';

export default {

  // List out all your API requests here.

  getFriends (callback) { auth.get('/response', {}, callback) }
}

Proxy Api Calls in the Dev Server

Setup Proxy on Dev Server

When using Webpack for Hot Reloading, we'll need to tell the webpack dev server that /api calls need to be reverse proxied to another server (ie. running on node express, nginx, or some embedded server in your IDE). For production you would just use nginx to do the proxying. The big advantage is we don't have to worry about CORS and also we don't expose the true API endpoints to the client (better protection from DDoS attacks).

Notice in build/dev-server.js this line:

build/dev-server.js

// proxy api requests
Object.keys(proxyTable).forEach(function (context) {
  var options = proxyTable[context]
  if (typeof options === 'string') {
    options = { target: options }
  }
  app.use(proxyMiddleware(context, options))
})

In this setup we are using: https://github.com/chimurai/http-proxy-middleware (you can see examples there). So let's add options to our config to make this work:

In config/index.js, update the proxyTable object to look like this:

config/index.js

dev:  {

    // ...
    
    proxyTable: {
      '/auth': {
        // @TODO: You need to replace this with your own backend API.
        // Demo OAuth2 server https://github.com/bshaffer/oauth2-demo-php.
        target: 'http://brentertainment.com/oauth2/lockdin/token',
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/auth': ''
        },
        router: {
        }
      },
      '/api': {
        target: 'http://brentertainment.com/oauth2',  // <-- Api server.
        changeOrigin: true,                           // <-- For virtual hosted sites.
        ws: true,                                     // <-- Proxy websockets.
        pathRewrite: {
        // Rewrite path localhost:8080/api to http://brentertainment.com/oauth2/lockdin.
          '^/api': '/lockdin'
        },
        router: {
          // when request.headers.host == 'dev.localhost:3000',
          // override target 'http://www.example.org' to 'http://localhost:8000'
          // 'dev.localhost:3000': 'http://localhost:8000'
        }
      }
    },
    
    // ...
}

Proxy Api Calls in Nginx Production Server

If you are using nginx on your production server, you can reverse proxy using the following configuration (to avoid CORS and to hide all backend endpoints):

(under construction)