使用gulp-connect插件在gulp中配置中间件

Question

My project's back-end part runs on http://localhost:8080 and front-end is running on gulp-connect server on http://localhost:8811 .While running on chrome, whenever a REST api call is made, chrome generates this error message-

No 'Access-Control-Allow-Origin' header is present on the requested resource

Can this error be removed using proxy configuration in gulp-connect's middleware options ? if yes then I want to know how. I tried setting a response header 'allow-origin' to ' http://localhost:8811 ' from back-end and it worked but i want to know if gulp can help remove that error.

Following is snippet from my gulpfile.js

gulp.task('webserver',function(){
    gulpWebServer.server({
        root : ['.'],
        port : 8811,
        host : 'gulp_dev',
        livereload : true,
        middleware: function(connect, opt) {
            return [
                proxy({ changeOrigin: true,target: 'http://localhost:8080'})
            ];
        }
    });
});

and service is as follows :

angular.module('RestAssignment').service('EmployeeService',["$resource",function($resource){
    return $resource('',{},{
        fetchEmployeeById :{
            url:'http://localhost:8080/rest/abc/getEmployeeById/2',
            method:'GET'
        },
        fetchEmployeeList : {
            url:'http://localhost:8080/rest/abc/getAllEmployees',
            method:'GET',
            isArray : true
        }
    },{});
}]);

Answer 1

FIXED: No 'Access-Control-Allow-Origin' header is present on the requested resource

install cors package:

npm install --save-dev cors

then add it as middleware to connect:

var gulp = require('gulp');
var connect = require('gulp-connect');
var cors = require('cors');

gulp.task('connect', function() {
  connect.server({
    root: 'app',
    middleware: function() {
        return [cors()];
    }
  });
});

Reference: here

Answer 2

The problem was that I was specifying complete URL (even with protocol and port) in $resource in EmployeeService which i think was nullifying the effect of proxy and second part of the problem was that i have not specified any path in proxy( path , options) function and because of this all requests were getting proxied but I wanted only REST calls to be proxied as i was getting 'No Access-Control-Allow-Origin header' while making REST API calls. so I changed gulpfile.js to the following :

gulp.task('webserver',function(){
    gulpWebServer.server({
        root : ['.'],
        port : 8811,
        host : 'gulp_dev',
        livereload : true,
        middleware: function(connect, opt) {
            return [
                return proxy('/rest/**', { target: 'http://localhost:8080', changeOrigin : true});
            ];
        }
    });
});

and EmoloyeeService to :

angular.module('LNAssignment').service('EmployeeService',["$resource",function($resource){
    return $resource('',{},{
        fetchEmployeeById :{
            url:'/rest/abc/getEmployeeById/2',
            method:'GET'
        },
        fetchEmployeeList : {
            url:'/rest/abc/getAllEmployees',
            method:'GET',
            isArray : true
        }
    },{});
}]);

Now the middleware proxy works perfectly without any CORS related error message.