时间戳

首页 > 解决方案 > Angular 和 PHP 服务器在同一个端口

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

问题描述

我正在使用 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() 获取它。

这是php文件路径

我们制作的过程如下：

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

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

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

标签： phpangularsessionxamppport

解决方案

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

我的开发 PHP 服务器在端口 80 上运行，我的角度 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/*要么存在于该目录中。

在我.htaccess的 php 项目的文件中，我设置了错误处理程序或重定向以适应 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/

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

推荐阅读