Angular 和 PHP 服务器在同一个端口

Posted 2023-02-25

【中文标题】Angular 和 PHP 服务器在同一个端口

【英文标题】：Having Angular and PHP server in same port

【发布时间】：2021-03-31 03:00:09

【问题描述】：

我正在使用 Angular10 为前端和 php 和 mysql 为后端创建一个 Web 服务。由于 Angular 与后端交互的方式（或者至少是我见过的，我是 Angular 的新手）是通过 http 请求进行交互的，所以我们的 PHP 后端的工作方式非常类似于 API。我们使用 XAMPP，因此 Apache 服务器侦听所有文件所在的同一路由，这样 Angular 会向 localhost/myphpfile.php 发出 http 请求并以 json 格式获取结果。

到目前为止一切都很好，但是我们正在尝试实现登录和会话系统，但我们一无所知，因为我在做一些研究时发现 PHP $_SESSION 会在我们“进入”和“离开”时自行重置.php 文件。看起来，要与 Angular 和 PHP 建立会话，我们要做的就是让它们都监听同一个端口。问题是，如果你试图让 PHP 服务器监听 4200 端口，它会抛出一个错误，因为该端口已经在使用中，所以我们不知道应该如何使用这两种技术实现会话系统。

有什么想法吗？谢谢。

更新：我将写一些我在答案中分享的更多信息，以便更清楚。

Apache 服务器在端口 80 或 443 上运行，而 Angular 在端口 4200 上运行。我浏览网站的方式是使用 localhost:4200/view（分别使用 Angular 进行路由），如果我需要来自数据库的任何数据，我从 Angular 向 localhost/myphpfile.php 发出 http 请求，它管理与数据库的连接并获取数据，以 json 格式返回，以便 Angular 可以通过 .suscribe() 获取它。

This is the php file path

我们制作的过程如下：

全局变量“userid”和“logged”分别为 null 和 false 用户登录并输入有效数据 Angular 向 login.php 发送一个 http 请求，验证用户和密码是否正确。如果是这样，它会从 users 表中获取 id 并将 userid 设置为该数字，并将 logged 设置为 true。 完成此操作后，这些全局变量将设置到 $_SESSION（这是在 setSession.php 中完成的）- 到目前为止，我们使用 $_SESSION 进行了回显，结果是正确的 然后在索引*中，我们向 getSession.php 发出 http 请求，它检查 $_SESSION 是否已设置或为空。如果已设置，它将全局变量设置为 $_SESSION 中的内容。当我们到达这一点时，$_SESSION 是空的并且没有之前的数据。

*只要用户通过按钮浏览网页，全局变量就会保持其值，但如果他通过 url 浏览，这些变量将被清空，这就是为什么我们需要使用 $_SESSION 再次设置它们

得到这些结果后，我们开始搜索错误，我们发现 Apache 和 Angular 都需要监听同一个端口，因此发布了这篇文章。

【问题讨论】：

每当我们“进入”和“离开” .php 文件时，PHP $_SESSION 都会自行重置 不，在文件顶部添加 session_start，会话将继续直到浏览器窗口打开。要将 Angular 与 php 集成，我建议您查看 apache 反向代理：因此您的域上将有一个带有 80 或 443 端口（由 apache 管理）的 url，它将代理 angular 服务器内部的内容在不同的端口上. domain/angular 将转发到 angular:4200。

你不能直接在 Angular 中使用 php 会话，但是你可以从 php 调用你的 Angular 应用程序，如果在 php 上会话是否建立，则该标志为 true。

是的，我们使用 session_start 但由于 Apache 服务器位于端口 80 或 443 上，而 Angular 位于端口 4200 上，因此会话没有被维护。我有点明白你在说什么，但我仍然缺少一点。目前，我使用 localhost:4200/view 访问网络的不同视图，每当我需要来自数据库的一些数据时，我都会向 localhost/myphpfile.php 发出 http 请求（应该在端口 80 或 443 上）。所以你说的是每当我提出请求时，它应该转到 localhost/whatev/myphpfile.php 重定向到 localhost/myphpfile.php 还是我弄错了？

根据您的描述，该设置应该不是会话的问题。您在哪个端口上运行与会话无关。只要会话cookie随请求一起传递，PHP就会拥有它。如果会话不起作用，您可以做一个简单的测试，例如创建一个文件，如果它尚未设置，则只使用 time() 设置会话值，然后输出该值。如果每个请求的时间都发生变化，请在此处发布代码（js 和 php），以便我们对其进行调试。但是，如果它没有改变，那么会话可以正常工作。目前我们没有太多工作要做。

@Magnus：“你在哪个端口上运行与会话无关”——这不是真的。会话 cookie 不在两个不同的域之间共享。

【参考方案1】：

我的环境中有相同的设置。请注意，有一个开发部分和一个生产部分。

我的开发 PHP 服务器在端口 80 上运行，我的 Angular ng-server 在端口 4200 上运行

同居

关于在同一个端口上的部分......

发展

开发时，我使用ng serve，但有一些额外的选项：

ng serve --host 0.0.0.0 --proxy-config proxy.config.json

proxy.config.json:

    "/api/*":
        "target": "https://localhost",
        "secure": false,
        "changeOrigin": true,
        "logLevel":"debug"
    ,
    "/auth/*":
        "target": "https://localhost",
        "secure": false,
        "changeOrigin": true,
        "logLevel":"debug"
    

我的 php 项目中的所有内容要么映射到 /api/*，要么映射到 /auth/*，或者存在于该目录中。

在我的 php 项目的 .htaccess 文件中，我设置了错误处理程序或重定向以适应 angular 项目和我的 php.ini 文件。 从这些方法中选择一种：

.htaccess 与 RewriteEngine

RewriteEngine on
# angular rules
RewriteCond %REQUEST_FILENAME -s [OR]
RewriteCond %REQUEST_FILENAME -l [OR]
RewriteCond %REQUEST_FILENAME -d
RewriteRule ^.*$ - [NC,L]

RewriteRule ^(.*) /index.html [NC,L]

#php rules for nice urls
RewriteRule ^api/(.+)/  /api.php?service=$1 [NC,L]
RewriteRule ^auth/login/$  /login.php [NC,L]

.htaccess 带重定向

#redirect 400 and 404 errors to angular
ErrorDocument 400 index.html
ErrorDocument 404 index.html

生产

当我为 prod 打包我的 Angular 应用程序后，我将它部署在与我的 php 应用程序相同的根目录中，并在同一服务器和端口上提供所有服务。

会话处理

假设您有一个映射到/auth/login/ 的login.php，它创建了一个令牌，形式为jwt 或cookie。

您需要编写在从您的角度到您的 php.ini 的所有 cals 中包含该令牌的逻辑。换句话说，您的每个 php 文件，例如api.php 需要在开始时进行验证，并采取相应措施。有几种方法可以做到这一点，我选择使用 jwts，并根据 JWT 中的范围让 angular 中的路由具有限制的守卫。