Connect to Homebrew PHP/MySQL from Angular App using $http - php

Question

I am building an Angular App with Gulp locally on my dev machine, that will eventually be a SaaS. All the data is hardcoded JSON in a service purely to get the front-end working.
Now I am ready to connect to a local database and will use PHP/MySQL.
I have a local development environment on OSX setup with Homebrew that has PHP and MySQL ready to go.
The issue:
I get a 404 when I use the url: 'db-insert.php' line no matter where I put the db-insert.php file in my directory structure.
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'
}
});
I have investigated
• CORS: Tried open -a 'Google Chrome' --args -allow-file-access-from-files
• gulp-connect-php
• gulp-webapp-running-browsersync-and-php
• BrowserSync Proxies
The app uses Gulps BrowserSync which has a proxy option that leverages Express to connect to a defined middleware, but I am stumped at where to point it or if it is the correct option at all.
Any explanation of what the correct way to do this is would be great. I think the answer is probably a combination of what I have found, but the implementation is the issue. Thanks much.

Answer 1

Ok, This turned out to be a filesystem/CORS issue. Here is how I solved it:
1) Go through the server to get to the php file
http://127.0.0.1/dev/db-insert.php
NOT
file://myproject/dev/db-insert.php
I was trying to access the file directly in the file system and not by its URL on the PHP server I have running as my localhost. When I changed the url to go through the apache server to find the file, it was able find it.
2) Once I got to the file I got the CORS issue
Adding the code below to the top of db-insert.php executes allowed the file to be accessed.The server could then execute the code.
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');