如何解决Angular 和 PHP 服务器在同一个端口 proxy.config.json：.htaccess 与 RewriteEngine.htaccess 与重定向

我正在使用 Angular10 为前端制作一个 Web 服务，后端使用 PHP 和 MysqL。由于 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 设置为该数字，并将 logging 设置为 true。
完成此操作后，这些全局变量将设置为 $_SESSION（这是在 setSession.PHP 中完成的） -- 到目前为止，我们对 $_SESSION 进行了回显，结果是正确的
然后在 index* 中，我们向 getSession.PHP 发出一个 http 请求，它检查 $_SESSION 是否已设置或为空。如果已设置，则将全局变量设置为 $_SESSION 内的内容。到这里时，$_SESSION 是空的，没有以前的数据。

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

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

解决方法

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

我的 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","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 应用程序相同的根目录中，并在相同的服务器和端口上提供所有服务。

会话处理

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

您需要编写在从 angular 到 php 的所有校准中包含该标记的逻辑。换句话说，您的每个 php 文件，例如api.php 需要在开始时验证它，并相应地采取行动。有几种方法可以做到这一点，我选择使用 jwts，并根据 JWT 中的范围让 angular 中的路由具有限制的保护。

Angular 和 PHP 服务器在同一个端口 proxy.config.json：.htaccess 与 RewriteEngine.htaccess 与重定向