Héctor William Héctor William - 1 month ago 9
AngularJS Question

Weird... Angular Proxy not working properly

Im working on an Angular / Lavaravel project , but I’m facing troubles configuring the Grunt proxy properly, I've followed several tutorials and made some research in order to solve this issue , but I haven’t succeed.

The problem is that the configured Proxy is not redirecting to the host it should be, I setted to forward request from

/localhost:9000/api
to
/localhost:8000/api
, but when I make a request :

Referer URL :
http://localhost:9000/api/whataver


Request URL :
http://localhost:9000/api/whatever


Is making a request to the same host, so the requests are not be proxy correctly, any suggestions?

Here's part of my grunt file:

connect: {
options: {
port: 9000,
// Change this to '0.0.0.0' to access the server from outside.
hostname: '127.0.0.1',
livereload: 35729
},
proxies: [
{
context: '/api',
host: '127.0.0.1',
port: 8000,
https: false,
changeOrigin: false
}
],
livereload: {
options: {
open: true,
base: [
'.tmp',
'<%= yeoman.app %>'
],
middleware: function (connect,options) {

var middlewares = [];

if (!Array.isArray(options.base)) {
options.base = [options.base];
}

// Set up the proxy
middlewares.push(require('grunt-connect-proxy/lib/utils').proxyRequest);

//server static files
middlewares.push(
modRewrite(['^[^\\.]*$ /index.html [L]']),
connect.static('.tmp'),
connect().use(
'/bower_components',
connect.static('./bower_components')
),
connect.static(appConfig.app)
);
return middlewares;
}
}
}


I'd appreciate any help, Thank you!

Answer

It's been a long time since I asked this question. I found the solution back then, but I never posted my solution, so here it goes:

In the first place there was nothing wrong with the configuration, everything was OK in both my Laravel and Angular. Apparently the problem was a bug with the Laravel proxy :

When you serve your Laravel app with the artisan command :

php artisan serve 

By default it serves in localhost:8000, that is not wrong

When you serve your Angular app with the grunt:

grunt serve

By default it serves in localhost:9000, Its Okay too, but by being both server using the logical localhost, then this's causing some bug in the Laravel app.

It can be solve as easy as serving in the same localhost but in other words, literally. here is the solution:

php artisan serve --host 127.0.0.1

And that was it, the bug has to be gone by now.

note: This solution just applies for the local environment I don't know how it would behave in production.