Grunt Connect Proxy: 404 Not Found - angularjs

Question

I'm using grunt-connect-proxy "^0.2.0" to proxy to an api from my angularjs application. The project was started with yeoman angular-generator.
I've followed the instructions here but when the proxy is used, I get:
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:9000/api/users
My Proxy Configuration:
connect: {
options: {
port: 9000,
// Change this to '0.0.0.0' to access the server from outside.
hostname: 'localhost',
livereload: 35729
},
proxies: [{
context: '/api', // the context of the data service
host: 'localhost', // wherever the data service is running
port: 8080, // the port that the data service is running on
https: false,
xforward: false
}],
My Middleware:
livereload: {
options: {
open: true,
base: '',
middleware: function (connect, options) {
var middlewares = [];
middlewares.push(require('grunt-connect-proxy/lib/utils').proxyRequest);
middlewares.push(connect.static('.tmp'));
middlewares.push(connect.static('test'));
middlewares.push(connect().use(
'/bower_components',
connect.static('./bower_components')
));
middlewares.push(connect.static(appConfig.app));
return middlewares;
}
}
},
My Serve Task
grunt.registerTask('serve', 'Compile then start a connect web server', function (target) {
if (target === 'dist') {
return grunt.task.run(['build', 'connect:dist:keepalive']);
}
grunt.task.run([
'clean:server',
'wiredep',
'concurrent:server',
'autoprefixer:server',
'configureProxies:server',
'connect:livereload',
'watch'
]);
});
EDIT
localhost:8080/users returns a 403 currently via Postman, so the API is running.

Answer 1

not directly answering your question but providing a solution (since noone else has answered) ... have you tried the npm module connect-modrewrite
this does exactly what you are trying to do.

Answer 2

I was having the same issue i resolve this way and its work for me. Look into my code below:-
connect: {
server: {
options: {
keepalive: true,
port: 8001,
protocol: 'http',
hostname: '*',
directory: 'dist',
open: {
target: 'http://localhost:8001/myDemo.html',
},
middleware: function(connect, options, middlewares) {
middlewares.unshift(function(req, res, next) {
res.setHeader('Access-Control-Allow-Credentials', true);
res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
res.setHeader('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
**if (req.method.toUpperCase() == 'POST') req.method='GET';**
return next();
});
return middlewares;
}
}
}
},
see the star marked line ie if (req.method.toUpperCase() == 'POST') req.method='GET'; i done this trick and its worked for me. This aricle also helps to me https://github.com/gruntjs/grunt-contrib-connect#middleware