-
Notifications
You must be signed in to change notification settings - Fork 232
HTTP Requests
In this section of the tutorial we'll look at Axios and how to organize ajax calls to our backend server API...
$ 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()
}
}
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) }
}
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'
}
}
},
// ...
}
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)