为什么我对PHP文件的Angular POST请求返回404？
[英]Why does my Angular POST request for PHP file return 404?
问题描述
I posted the code for my index.html , app.js and insert.php . 
我发布了index.html ， app.js和insert.php的代码。
The dependencies installed are express , mysql and morgan . 安装的依赖项是express ， mysql和morgan 。
In my folder I have 在我的文件夹中
- /node_modules / node_modules
- app.js app.js
- index.html 的index.html
- insert.php insert.php
- package.json 的package.json
I have a WAMP local server running in the background. 我在后台运行WAMP本地服务器。 phpMyadmin's username is root and password is blank, by default. phpMyadmin的用户名默认为root，密码为空。 I've set up a database called storestuff with a table in it named thestuff which has two columns title and content . 我已经成立了一个名为数据库storestuff与表中它命名thestuff其中有两列title和content 。
So I run node app.js in the terminal and then get 所以我在终端中运行node app.js ，然后获取
Server running on port 3000.
Connected successfully to the database . Connected successfully to the database 。
Now, I go to visit localhost:3000 现在，我要访问localhost：3000
When the page loads, terminal shows GET / 304 20.635 ms - - which means the page loaded correctly. 页面加载后，终端显示GET / 304 20.635 ms - -表示页面正确加载。
I've also inserted some dummy data into the MySQL storestuff database using phpMyAdmin for testing purposes. 我还使用phpMyAdmin将一些虚拟数据插入到MySQL storestuff数据库中以进行测试。 Visiting localhost:3000/load which is a route set up in app.js , terminal shows GET /load 200 16.382 ms - - which shows in the browser, a page with JSON data which is indeed the dummy data I had inserted and http code 200 means the GET request worked properly. 访问localhost：3000 / load（这是在app.js设置的路由），终端显示GET /load 200 16.382 ms - -在浏览器中显示一个页面，其中包含JSON数据，而这确实是我已插入的虚拟数据和http代码200表示GET请求正常工作。
When I fill out the title field and the content field and press submit, terminal shows POST /insert.php 404 2.949 ms - 150 which I don't understand because insert.php is in the same folder as index.html . 当我填写title字段和content字段并按POST /insert.php 404 2.949 ms - 150 ，终端会显示POST /insert.php 404 2.949 ms - 150我不明白，因为insert.php与index.html在同一文件夹中。
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 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 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"')");
?>
3 个解决方案
解决方案1
1 已采纳 2017-05-11 04:15:37
add this in the top of your php file 将此添加到您的php文件的顶部
<?php
header("Access-Control-Allow-Origin: *");
解决方案2
1 2017-05-11 04:22:37
try with headers property 尝试使用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);
});
and you can access in on insert.php 您可以在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;
}
Note: you can also you set it globally for all post request within .config block as below 注意：您也可以在.config块中为所有发布请求全局设置它，如下所示
myApp.config(function($httpProvider) {
$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
});
解决方案3
0 2017-05-11 04:44:19
You are using node to power your web server. 您正在使用节点为Web服务器供电。 Couple of things: in your app routes you don't have a route for app.post ('/insert.php'), which is the cause of your 404. But node.js itself won't interpret php files for you, so at best it will show the code for the php file. 几件事情：在您的应用程序路由中，没有app.post（'/insert.php'）的路由，这是您404的原因。但是node.js本身不会为您解释php文件，因此充其量只能显示php文件的代码。 There are plugins you can use or use another web server like nginx in front of the express/nodejs. 在express / nodejs前面有一些插件可以使用，也可以使用其他Web服务器，例如nginx。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.