Running AngularJs and Laravel apps together under the same domain - php

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