为什么我的 Angular POST 请求 PHP 文件 return 404？

Question

我发布了 index.html、app.js 和 insert.php 的代码。

安装的依赖项是 express、mysql 和 morgan。

在我的文件夹里有

/node_modules
app.js
index.html
insert.php
package.json

我在后台有一个 WAMP 本地服务器运行ning。默认情况下，phpMyadmin 的用户名是 root，密码为空。我已经建立了一个名为 storestuff 的数据库，其中有一个名为 thestuff 的 table，它有两列 title 和 content.

所以我在终端运行node app.js然后得到
Server running on port 3000.
Connected successfully to the database。

现在，我去访问localhost:3000

当页面加载时，终端显示 GET / 304 20.635 ms - -，这意味着页面已正确加载。

我还使用 phpMyAdmin 将一些虚拟数据插入 MySQL storestuff 数据库以进行测试。访问 localhost:3000/load 这是在 app.js 中设置的路由，终端显示 GET /load 200 16.382 ms - - 它在浏览器中显示了一个包含 JSON 数据的页面，这确实是我插入的虚拟数据，http 代码 200 意味着 GET 请求正常工作。

当我填写 title 字段和 content 字段并按提交时，终端显示 POST /insert.php 404 2.949 ms - 150 我不明白，因为 insert.php 在与 index.html.

相同的文件夹

index.html

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro">
  </head>

  <body>
    <font face="Source Sans Pro">
      <div ng-app="myApp" ng-controller="myController">
        <h1> Hello world! </h1>
        <form>
          Title <input type="text" ng-model="title"><br>
          Content <input type="text" ng-model="content"><br>
          <input type="button" value="Submit" ng-click="insertdata()">
        </form>
        <script>
          var app = angular.module('myApp', []);
          app.controller('myController', function($scope, $http) {
            $scope.insertdata = function() {
              $http.post('insert.php', {
                'title':$scope.title,
                'content':$scope.content
              })
              .then(function(data) {
                console.log("Data inserted into the MySQL database successfully.");
              });
            }
          });
        </script>
      </div>
    </font>
  </body>
</html>

app.js

var express = require('express');
var mysql = require('mysql');
var morgan = require('morgan');
var app = express();
app.use(morgan('dev'));

var connection = mysql.createConnection({
    host : 'localhost',
    user : 'root',
    password : '',
    database : 'storestuff'
});

connection.connect(function(error) {
    if(error) console.log("Problem connecting to MySQL: " + error);
    else console.log("Connected successfully to the database");
});

app.get('/', function(req, res) {
    res.sendFile(__dirname + '/index.html');
});

app.get('/load', function(req, res) {
    connection.query("SELECT * from thestuff", function(err, rows) {
        if(err) console.log("SELECT from thestuff... did not work: " + err);
        else res.end(JSON.stringify(rows));
    });
});

app.listen(3000, function() {
    console.log("Server running on port 3000.");
});

insert.php

<?php
  $data = json.decode(file_get_content('php://input'));
  $title = mysql_real_escape_string($data->title);
  $content = mysql_real_escape_string($data->content);
  mysql_connect('localhost', 'root', '');
  mysql_select_db('storestuff');
  mysql_query("INSERT INTO thestuff('title', 'content') VALUES('".$title"', '".$content"')");
?>

Answer 1

将此添加到您的 php 文件的顶部

<?php
  header("Access-Control-Allow-Origin: *");

Answer 2

试试 headers 属性

$http({
      method: 'POST',
      url: 'insert.php',
      data: {'whetever':'data', 'in':'json format'},
      headers: {'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'}
    })
    .then(function(res){
         console.log('successful response', res);
    .catch(function(err) { 
         console.error('Error while post', err);
    });

您可以在 insert.php

访问

header("Access-Control-Allow-Origin: *");

if ($_SERVER['REQUEST_METHOD'] == 'POST' && empty($_POST)) {
    $_POST = json_decode(file_get_contents('php://input'), true);    
    echo $data->whatever;
  }

注意： 您也可以在 .config 块中为所有 post 请求全局设置它，如下所示

myApp.config(function($httpProvider) {
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
});

Answer 3

您正在使用节点来支持您的网络服务器。几件事：在您的应用程序路由中，您没有 app.post ('/insert.php') 的路由，这是您的 404 的原因。但是 node.js 本身不会为您解释 php 文件，因此它最多只能显示 php 文件的代码。在 express/nodejs 前面有一些插件可以使用或使用其他网络服务器，如 nginx。

为什么我的 Angular POST 请求 PHP 文件 return 404？

Why does my Angular POST request for PHP file return 404?

javascript

php

mysql

http-status-code-404

angularjs