Running AngularJs and Laravel apps together under the same domain

Question

So im trying to build 2 separate applications 1 that used as a backend (Laravel as a REST api) and Angular application as the client, eventually those 2 apps have to work together under the same domain as a single web app.

What im trying to accomplish:

My Angular app is a single page application that boot from index.html, all the routes are handled by Angular except /api/* that should be handled by Laravel app. Im using 2 different apps in order to build web app more dynamic so i can easily change my backend framework and technologies and testing each app as a 'stand-alone' more easily. I dont want to use CORS in my response headers because my REST API serves ONLY my Angular app and not other applications such as api for developers. I want to use proxy that will foward all requests come from http://localhost:9100/api/* to: http://localhost:9000/api/*

Firstly im running Laravel on port 9000 by running:

php artisan serve --port 9000

And Angular app under port 9100 by running a gulp task (index.html is in the path ./src):

gulp.task('webserver', function(){
 connect.server({
    root: './src',
    port: 9100,
    middleware: function(connect, o) {
        var url = require('url');
        var proxy = require('proxy-middleware');
        var options = url.parse('http://localhost:9000/api');
        options.route = '/api';
        return [proxy(options)];
    }
 });
});

Both apps work perfectly as a stand-alone, but when im trying to navigate to: http://localhost:9100/api/v1/comments i receive the following error:

Error: connect ECONNREFUSED at errnoException (net.js:904:11) at Object.afterConnect [as oncomplete] (net.js:895:19)

I tried to investigate the cause of this problem, some people say it connected to my hosts file so i had to add the line: 127.0.0.1 localhost

But it doesnt work. I tried different gulp task:

gulp.task('webserver', function() {
 gulp.src("./src")
    .pipe(webserver({
        port: 9100,
        livereload: true,
        open: 'http://localhost:9100',
        proxies: [
            {
                source: '/api', target: 'http://localhost:9000/api'
            }
        ]
    }));
});

And i receive the exact same error...

My develop environment is Windows 10 x64 bit.

Answer 1

Did you try to use http-proxy-middleware instead of proxy-middleware?

I experienced the same error with proxy-middleware. (Gulp browser-sync - redirect API request via proxy)

Error: connect ECONNREFUSED
    at errnoException (net.js:904:11)
    at Object.afterConnect [as oncomplete] (net.js:895:19)

Ended up creating http-proxy-middleware, which solved the issue in my case.

proxy-middleware somehow didn't work on the corporate network. http-proxy just did. (http-proxy-middleware uses http-proxy to do actual proxying)

Guess you are using gulp-webserver; The proxy can be added like:

var proxyMiddleware = require('http-proxy-middleware');

gulp.task('webserver', function() {
 gulp.src("./src")
    .pipe(webserver({
        port: 9100,
        livereload: true,
        open: 'http://localhost:9100',
        middleware: [proxyMiddleware('/api', {target: 'http://localhost:9000'})]
    }));
});

Never found out why this error is thrown with proxy-middleware in the corporate network ...

---

Update:

Think this question has been answered:

It was a problem with the artisan server, had to run it this way:

php artisan serve --host 0.0.0.0

Source:

https://github.com/chimurai/http-proxy-middleware/issues/38

https://github.com/chimurai/http-proxy-middleware/issues/21#issuecomment-138132809