Create your REST API with Express (2/3)

You are reading the second part of Create Rest API with Express, feel free to read the Part 1 for continue, in this case I will build a simple client with Vue for getting the list of documents from our API.

Create my app with Vue.

The only goal of this application is to get the answer and show them into the ul.

The first steps are into the index.html are include the CDN link for Vue, Axios, and vueapp.js file.

The code HTML contains a div with id 'app' to be used by Vue and also the v-for directive to iterate into the documents array property.

<body> <div id="app" class="container"> <ul> <li v-for="d in documents">{{d.description}}</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="vueapp.js"></script> </body> The App have into data area the APIurl property, the documents property array and the method getDocuments().

The getDocuments() method will get the data from our API answer using axios and bind the response into the property documents, this method is called from the mounted event.

new Vue({ el:"<a href="https://danywalls.com/tag:app" class="hashtag"><span>#</span><span class="p-category">app</span></a>", data:{ apiurl:'http://localhost:3009/api/', documents:[] }, mounted(){ this.getDocuments(); }, methods:{ getDocuments() { let documents = this.apiurl + 'documents/' axios.get(documents).then( (d)=> { this.documents = d.data.documents }) } } })

Install lite-server package

lite-server is a node package which allows serving our HTML page and refresh for every change, to do so, head over to the terminal, into the same app directory run this:

npm install -g lite-server

Run our Rest API and Vue App

Into the app directory use nodemon to run the Web API and lite-server for the Vue App using &.

danys-imac:expressapp dany$ nodemon app.js & lite-server [1] 1188 [nodemon] 1.18.4 [nodemon] to restart at any time, enter rs [nodemon] watching: *.* [nodemon] starting node app.js Did not detect a bs-config.json or bs-config.js override file. Using lite-server defaults... ** browser-sync config ** [Browsersync] Serving files from: ./ [Browsersync] Watching files... 18.10.14 11:29:12 200 GET /index.html 18.10.14 11:29:12 304 GET /vueapp.js Go to your browser and nothing happened, open our the browser console.. and ... %&%=/!! CORS

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3009/api/documents/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Why CORS Error?

The CORS Error is caused because the app is running on my localhost using 8080 port and the Rest API is using 3009, our browser says he can't read data from another resource because the answer comes from another server.

By default, the browsers block making requests against a different origin than the one from which it was served.

I need to configure the Rest API to accept requests from external resources and set the right headers on the response from our API.

Configure Express

Edit API and set new middleware to handle the response using use() the method for setting the headers into the response using the setHeader() method and it is completed call next() to send the request with the header to the path requested.

app.use((req, res, next) => { // I don't care which domain is trying to access res.setHeader("Access-Control-Allow-Origin","*") // Limit headers are allow to send res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); //Limit http request supported like get, post or delete. res.setHeader("Access-Control-Allow-Methods", "GET, POST, PATH, DELETE, OPTIONS" ); next(); });

Done! your nodemon will relaunch your express app and our API is ready to accept requests from external resources and also our Vue app is getting the JSON.

#express #vuejs