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
}
},{});
}]);
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.