AngularJS $http.post 不发送数据答案

【问题标题】：AngularJS $http.post does not send dataAngularJS $http.post 不发送数据
【发布时间】：2016-06-07 14:12:12
【问题描述】：

我对 AngularJS 和 Laravel 5.2 感到沮丧。

我想做一个普通的 $http 发布请求：

APIservice.saveArticle = function ( oArticle, callback )
{
   var message = 'Hello World!';
   $http({
          method: 'POST',
          url: sBaseUrl + '/api/dummy/',
          headers: {'Content-Type': 'application/x-www-form-urlencoded'},
          data: $.param({ 'message' : message })
   });
}

如果我现在尝试在邮递员 (POST + URL/api/admin) 中调用此路由，我可以在选项卡标题下看到内容类型为 text/html。

所以我编辑了模块配置：

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

这仍然行不通。而且我的后端控制器也没有数据：

Route::post('api/dummy',
function ( Request $request )
{
    var_dump(json_decode(file_get_contents('php://input'), true)); // NULL 
    var_dump($_POST); // EMPTY
}
);

我做错了什么？我已经尝试了很多，但我从来没有得到这个工作......有人知道这是什么问题吗？

【问题讨论】：

消息从何而来？你是说oArticle吗？我会避免像这样混合 jQuery，这可能是问题所在。尝试将数据设置为静态的，以确保您首先发回数据。
@BrianS 我已经尝试了很多，还有：kopy.io/qxAt8 消息来自 $http({...
你是在同一个域还是不同域运行php和angular？
我都在同一个域上运行，正常的 php 函数也可以工作，比如 echo 'test';在路由函数中，但我没有收到任何数据
仅供参考，在您的控制器中，您还可以使用 Laravel 的方式进行调试。这将是一个单行，转储和死亡所有输入：dd($request->all());

标签： angularjs laravel http-post

【解决方案1】：

邮递员是一个休息客户端。您需要设置请求标头 Content-type:application/x-www-form-urlencoded 以便将带有此标头的请求发送到服务器。如果您没有在请求中设置任何标头，Postman 将发送默认标头 Content-type:text/html。此示例适用于我的本地主机。

test-so.html

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <title>Test Angular POST request</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
        <script src="app.js"></script>
    </head>
    <body ng-controller="testCtrl">
        <p>Press button and get response from the server</p>
        <button ng-click="callServer()">Call</button>
        <p><strong>Response:</strong></p>
        <p>{{htmlResponse}}</p>
    </body>
</html>

app.js

'use strict'
var appModule = angular.module('myApp',[]).service('testService',['$http',function($http){
       this.getResponse = function (){
           return $http({
                url: "api-post.php",
                method: "POST",
                data: "p1=first_parameter&p2=second_parameter",
                headers: {                    
                    "Content-Type": "application/x-www-form-urlencoded"
                }
            });
       } 
}]).controller('testCtrl',['$scope','testService',function($scope,testService){
    $scope.callServer = function(){
       testService.getResponse().then(function(response){
        $scope.htmlResponse = response.data;
    }); 
    };

}]);

api-post.php

<?php
echo "This text come from the server. You sent to me this:";
print_r($_POST);
?>

如果你点击按钮，结果是这样的：

您可以在图片中的 Chrome Inspector Tool 中看到请求和响应。这个例子适用于我当地的环境。如果您的客户端和服务器位于不同的域中，则存在安全限制（请参阅 CORS）。

【讨论】：