angularjsgruntjsyeomanyeoman-generator-angular

Weird... Angular Proxy not working properly


Im working on an Angular / Laravel 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 Succeded.

The problem is that the configured Proxy is not redirecting to the host as 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!


Solution

  • 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.