使用 $http 从 Angular App 连接到 Homebrew PHP/MySQL

Posted 2023-03-04

【中文标题】使用 $http 从 Angular App 连接到 Homebrew PHP/MySQL

【英文标题】：Connect to Homebrew PHP/MySQL from Angular App using $http

【发布时间】：2015-04-03 07:59:33

【问题描述】：

我正在我的开发机器上本地使用 Gulp 构建一个 Angular 应用程序，最终将成为一个 SaaS。所有数据在服务中都是硬编码的 JSON，纯粹是为了让前端正常工作。

现在我已准备好连接到本地数据库并将使用 php/mysql。 我在 OSX 上使用 Homebrew 设置了一个本地开发环境，该环境已准备好 PHP 和 MySQL。

问题： 无论我将 db-insert.php 文件放在目录结构中的哪个位置，当我使用 url: 'db-insert.php' 行时都会得到 404。

POST http://localhost:3000/db-insert.php 404 (Not Found)

   var request = $http(
    method: 'post',
    url: 'db-insert.php',
    data: 
        name: $scope.name,
        email: $scope.email,
        message: $scope.message
    ,
    headers: 
        'Content-Type': 'application/x-www-form-urlencoded'
    
);

我调查过

• CORS：已尝试open -a 'Google Chrome' --args -allow-file-access-from-files

•gulp-connect-php

•gulp-webapp-running-browsersync-and-php

•BrowserSync Proxies

该应用程序使用 Gulps BrowserSync，它有一个代理选项，可以利用 Express 连接到定义的中间件，但我不知道该指向哪里，或者它是否是正确的选项。

任何关于正确方法的解释都会很棒。我认为答案可能是我所发现的组合，但实施是问题所在。非常感谢。

【参考方案1】：

好的，结果证明这是一个文件系统/CORS 问题。以下是我的解决方法：

1）通过服务器获取php文件

http://127.0.0.1/dev/db-insert.php

不是

file://myproject/dev/db-insert.php

我试图直接在文件系统中访问该文件，而不是通过我作为本地主机运行的 PHP 服务器上的 URL。当我更改url通过apache服务器查找文件时，它能够找到它。

2) 找到文件后，我遇到了 CORS 问题

将以下代码添加到 db-insert.php 执行的顶部允许访问该文件。然后服务器可以执行该代码。

header('Access-Control-Allow-Origin: '. $_SERVER['HTTP_ORIGIN'] );
    header('Access-Control-Allow-Credentials: true' );
    header('Access-Control-Request-Method: *');
    header('Access-Control-Allow-Methods: POST, GET, PUT, DELETE, OPTIONS');
    header('Access-Control-Allow-Headers: *,x-requested-with,Content-Type');
    header('X-Frame-Options: DENY');

【讨论】：

您可以使用 BrowserSync 中间件来添加这些 CORS 标头。 middleware: function (req, res, next) res.setHeader('Access-Control-Allow-Origin', '*'); next(); 如果它们仅用于测试环境，在生产中不需要。