AngularJS 开机自检失败：对印前检查的响应具有无效的 HTTP 状态代码 404

php javascript angularjs ajax cors

2022-08-30 09:31:21

我知道有很多这样的问题，但我见过的问题都没有解决我的问题。我已经使用了至少3个微框架。它们都无法执行简单的 POST，这应该返回数据：

AngularJS 客户端：

var app = angular.module('client', []);

app.config(function ($httpProvider) {
  //uncommenting the following line makes GET requests fail as well
  //$httpProvider.defaults.headers.common['Access-Control-Allow-Headers'] = '*';
  delete $httpProvider.defaults.headers.common['X-Requested-With'];
});

app.controller('MainCtrl', function($scope, $http) {
  var baseUrl = 'http://localhost:8080/server.php'

  $scope.response = 'Response goes here';

  $scope.sendRequest = function() {
    $http({
      method: 'GET',
      url: baseUrl + '/get'
    }).then(function successCallback(response) {
      $scope.response = response.data.response;
    }, function errorCallback(response) { });
  };

  $scope.sendPost = function() {
    $http.post(baseUrl + '/post', {post: 'data from client', withCredentials: true })
    .success(function(data, status, headers, config) {
      console.log(status);
    })
    .error(function(data, status, headers, config) {
      console.log('FAILED');
    });
  }
});

SlimPHP 服务器：

<?php
    require 'vendor/autoload.php';

    $app = new \Slim\Slim();
    $app->response()->headers->set('Access-Control-Allow-Headers', 'Content-Type');
    $app->response()->headers->set('Content-Type', 'application/json');
    $app->response()->headers->set('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
    $app->response()->headers->set('Access-Control-Allow-Origin', '*');

    $array = ["response" => "Hello World!"];

    $app->get('/get', function() use($array) {
        $app = \Slim\Slim::getInstance();

        $app->response->setStatus(200);
        echo json_encode($array);
    }); 

    $app->post('/post', function() {
        $app = \Slim\Slim::getInstance();

        $allPostVars = $app->request->post();
        $dataFromClient = $allPostVars['post'];
        $app->response->setStatus(200);
        echo json_encode($dataFromClient);
    });

    $app->run();

我已经启用了 CORS，并且 GET 请求可以正常工作。html 将使用服务器发送的 JSON 内容进行更新。但是我得到一个

XMLHttpRequest 无法加载 http://localhost:8080/server.php/post。印前检查的响应具有无效的 HTTP 状态代码 404

每次我尝试使用 POST。为什么？

编辑：Pointy要求的req/res

答案 1

编辑：

已经很多年了，但我觉得有必要对此作进一步的评论。现在我实际上是一名开发人员。对后端的请求通常使用令牌进行身份验证，您的框架将获取并处理该令牌;这就是缺少的东西。我实际上根本不确定这个解决方案是如何工作的。

源语言：

好吧，这就是我是如何解决这个问题的。这一切都与 CORS 策略有关。在 POST 请求之前，Chrome 正在执行预检 OPTIONS 请求，该请求应在实际请求之前由服务器处理和确认。现在这真的不是我想要的这么简单的服务器。因此，重置标头客户端会阻止预检：

app.config(function ($httpProvider) {
  $httpProvider.defaults.headers.common = {};
  $httpProvider.defaults.headers.post = {};
  $httpProvider.defaults.headers.put = {};
  $httpProvider.defaults.headers.patch = {};
});

浏览器现在将直接发送开机自检。希望这有助于很多人...我真正的问题是对CORS的理解不够。

链接到一个伟大的解释：http://www.html5rocks.com/en/tutorials/cors/

感谢这个答案为我指明了道路。

答案 2

您已启用 CORS 并在服务器中启用。如果仍然得到方法工作并且方法不起作用，那么可能是因为问题和问题。Access-Control-Allow-Origin : *GETPOSTContent-Typedata

首先，AngularJS使用一些Web服务器（特别是PHP）未本机序列化的数据传输数据。对于他们来说，我们必须将数据传输为Content-Type: application/jsonContent-Type: x-www-form-urlencoded

示例：-

        $scope.formLoginPost = function () {
            $http({
                url: url,
                method: "POST",
                data: $.param({ 'username': $scope.username, 'Password': $scope.Password }),
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
            }).then(function (response) {
                // success
                console.log('success');
                console.log("then : " + JSON.stringify(response));
            }, function (response) { // optional
                // failed
                console.log('failed');
                console.log(JSON.stringify(response));
            });
        };

注意：我正在使用序列化数据以使用 .或者，您可以使用以下 javascript 函数$.paramsContent-Type: x-www-form-urlencoded

function params(obj){
    var str = "";
    for (var key in obj) {
        if (str != "") {
            str += "&";
        }
        str += key + "=" + encodeURIComponent(obj[key]);
    }
    return str;
}

并用于序列化它，因为请求仅获取表单中的 POST 数据。params({ 'username': $scope.username, 'Password': $scope.Password })Content-Type: x-www-form-urlencodedusername=john&Password=12345