The Problem
So… you are creating an awesome Single Page Application with your favorite front-end framework (Vue.js, Angular, etc…) you need to connect your app with an external service; you have selected a JavaScript library to make the AJAX calls (like Axios), everything seem to be perfect, you create your method to get the remote data with something like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
var serverURL = 'http://example.com:3000/my-rest-api-end-point-to-get-data'; var _this = this; var configAxios = { url: serverURL, method: 'get', responseType: 'json', data: {}, headers: {} }; // Getting information using Axios library axios.request(configAxios).then(function(response) { console.log(response); _this.myData = response.data; }); |
And suddenly, your app is broken, why? If you go to the console, you will see an error similar to this one:
The Solution
Because of security, you cannot request resources that are not in your domain (same server, same port). The solution is quite simple:
You need to authorize the origins that can make this type of calls.
This authorization is known as enabling CORS, this operation needs to be done in your SERVER. Here is an example using an Express.js application, see step 3 in the comments:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
const express = require('express'); const app = express(); const path = require('path'); const server = require('http').createServer(app); const morgan = require('morgan'); const bodyParser = require('body-parser'); const port = process.env.PORT || 3300; const pollsRouter = require('./api/routers/polls-router'); const pollsService = require('./api/services/polls-dummy.service'); // 1. Morgan middleware for logging app.use(morgan('dev')); // 2. Express static index.html file app.get('/', (req, res) => { res.sendFile(path.join(__dirname, 'index.html')); }); // 3. Enable CORS on ExpressJS to avoid cross-origin errors when calling this server using AJAX // We are authorizing all domains to be able to manage information via AJAX (this is just for development) app.use(function(req, res, next) { // Instead of "*" you should enable only specific origins res.header('Access-Control-Allow-Origin', '*'); // Supported HTTP verbs res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE'); // Other custom headers res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); next(); }); // 4. Body parser middleware to auto-parse request body to JSON app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json()); // 5. Run the server server.listen(port, () => { console.log('Server active on port: %d', port); }); |
Simple and fast, I hope you find this useful for your implementations.
See you next time!
Alex Arriaga 
