在同一个域下同时运行AngularJs和Laravel应用


Running AngularJs and Laravel apps together under the same domain

所以我试图构建两个独立的应用程序,一个作为后端(Laravel作为REST api),一个作为客户端,最终这两个应用程序必须在同一个域下作为一个web应用程序一起工作。

我想要完成的事情:

我的Angular应用是一个单页应用,从index.html启动,所有的路由都由Angular处理,除了/api/*,它应该由Laravel应用处理。我使用2个不同的应用程序,以建立web应用程序更动态,所以我可以很容易地改变我的后端框架和技术,并测试每个应用程序作为一个"独立"更容易。我不想在我的响应头中使用CORS,因为我的REST API只服务于我的Angular应用,而不服务于其他应用,比如面向开发者的API。我想使用代理,将所有来自http://localhost:9100/api/*的请求转发到:http://localhost:9000/api/*

首先,我在9000端口上运行Laravel:

php artisan serve --port 9000

和Angular应用在端口9100下运行gulp任务(index.html在路径。/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)];
    }
 });
});

这两个应用程序作为一个独立的完美工作,但当我试图导航到:http://localhost:9100/api/v1/comments我收到以下错误:

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

我试图调查这个问题的原因,有人说它连接到我的hosts文件,所以我不得不添加一行:127.0.0.1 localhost

但是它不起作用。我尝试了不同的gulp任务:

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'
            }
        ]
    }));
});

和我收到完全相同的错误…

我的开发环境是Windows 10 x64位

您是否尝试使用http-proxy-middleware而不是proxy-middleware ?

我在proxy-middleware中遇到了同样的错误。(Gulp浏览器同步-重定向API请求通过代理)

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

最终创建了http-proxy-middleware,这解决了我的问题。

proxy-middleware不知何故不能在公司网络上工作。http-proxy刚刚做到了。(http-proxy-middleware使用http-proxy进行实际代理)

猜你正在使用gulp-webserver;可以这样添加代理:

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'})]
    }));
});

从来没有发现为什么代理中间件在公司网络中抛出这个错误…


更新:

认为这个问题已经得到了答案:

这是一个工匠服务器的问题,必须这样运行:

源:

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

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