access-control-allow-origin

When do development, especially front end and back end are separated in different projects, it is easy to get  access-control-allow-origin error when call webservices.

For this, we have some solutions:

1) For front end, we can add some proxy logic to redirect front end HTTP request through proxy, for instance, our front end application runs on http://localhost:3000, and back end application on http://localhost:8000, if front end make a service call to back end, say /api/v1/students, the call will proxyed to http://localhost:8000/api/v1/students, not http://localhost:3000/api/v1/students, thus avoiding access-control-allow-origin error from the browser. for instance, if you use gulp serve, in server.js file, you can use 'http-proxy-middleware':

var proxyMiddleware = require('http-proxy-middleware');
server.middleware = proxyMiddleware('/api', {target: 'http://localhost:8888', changeOrigin: true});

For 'http-proxy-middleware' can get more info in: https://github.com/chimurai/http-proxy-middleware

2) Otherwise, we can add some logic on back end, e.g. if we use spring framework,  we can use @CrossOrigin annotation on method, class or global level. For global enabled we can add this annotation in one of the configuration classes is OK：

@Configuration @CrossOrigin public class WebConfig { }

3) Or we can just do something without code, say if we use Chrome, we can add the plugin

This will also avoid this error.