AngularJS POST失败：对预检的响应具有无效的HTTP状态代码404 [英] AngularJS POST Fails: Response for preflight has invalid HTTP status code 404

问题描述

我知道有很多这样的问题，但我没有看到任何修正我的问题。我已经使用至少3个微框架。所有这些都无法执行简单的POST，它应该返回数据：

angularJS客户端：

  var app = angular.module（'client'，[]）; 
 
 app.config（function（$ httpProvider）{
 //取消注释以下行使GET请求失败
 // $ 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 here 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=> 你好，世界！]; 
 
 $ 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（）; 
 $ b b $ allPostVars = $ app-> request-> post（）; 
 $ dataFromClient = $ allPostVars ['post']; 
 $ app-> response-> setStatus（200）; 
 echo json_encode（$ dataFromClient）; 
}）; 
 
 $ app-> run（）; 
  

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

XMLHttpRequest无法加载

解决方案

Ok，所以这里是我想出来的。
这一切都与CORS政策有关。在POST请求之前，Chrome正在执行预检OPTIONS请求，应在实际请求之前由服务器处理和确认。现在这真的不是我想要的这样一个简单的服务器。因此，重置标头客户端防止预检：

  app.config（function（$ httpProvider）{
 $ httpProvider.defaults.headers.common = {}; 
 $ httpProvider.defaults.headers.post = {}; 
 $ httpProvider.defaults.headers.put = {}; 
 $ httpProvider。 defaults.headers.patch = {}; 
}）; 
  

浏览器现在将直接发送POST。希望这有助于很多人在那里...我的真正的问题是不足以理解CORS。

链接到一个很好的解释： http：// www。 html5rocks.com/en/tutorials/cors/

感谢这个答案给我的方式。

I know there are a lot of questions like this, but none I've seen have fixed my issue. I've used at least 3 microframeworks already. All of them fail at doing a simple POST, which should return the data back:

The angularJS client:

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');
    });
  }
});

The SlimPHP server:

<?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();

I have enabled CORS, and GET requests work. The html updates with the JSON content sent by the server. However I get a

XMLHttpRequest cannot load http://localhost:8080/server.php/post. Response for preflight has invalid HTTP status code 404

Everytime I try to use POST. Why?

EDIT: The req/res as requested by Pointy

解决方案

Ok so here's how I figured this out. It all has to do with CORS policy. Before the POST request, Chrome was doing a preflight OPTIONS request, which should be handled and acknowledged by the server prior to the actual request. Now this is really not what I wanted for such a simple server. Hence, resetting the headers client side prevents the preflight:

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

The browser will now send a POST directly. Hope this helps a lot of folks out there... My real problem was not understanding CORS enough.

Link to a great explanation: http://www.html5rocks.com/en/tutorials/cors/

Kudos to this answer for showing me the way.

这篇关于AngularJS POST失败：对预检的响应具有无效的HTTP状态代码404的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！