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

Question

所以我尝试构建 2 个单独的应用程序 1 作为后端（Laravel 作为 REST api）和 Angular 应用程序作为客户端，最终这 2 个应用程序必须在同一个域下作为单个 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

通过运行 gulp 任务在 9100 端口下的 Angular 应用程序（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我收到以下错误：

错误：在 Object.afterConnect [as oncomplete] (net.js:895:19) 处的 errnoException (net.js:904:11) 处连接 ECONNREFUSED

我试图调查这个问题的原因，有人说它连接到我的主机文件，所以我不得不添加以下行： 127.0.0.1 本地主机

但它不起作用。 我尝试了不同的 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 位。

Answer 1

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

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)

最终创建了 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'})]
    }));
});

从未发现为什么公司网络中的代理中间件会引发此错误...

---

更新：

认为这个问题已经得到解答：

这是工匠服务器的问题，必须这样运行：

php artisan serve --host 0.0.0.0

来源：

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

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