AngularJS POST失敗：プリフライトの応答に無効なHTTPステータスコード404があります

Question

私はこのような質問がたくさんあることを知っています、しかし私が私の問題を直したのを見たことがないです。私は少なくとも3つのmicroframeworksをすでに使っています。それらすべては単純な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

Answer 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 = {};
});

ブラウザはPOSTを直接送信します。これがたくさんの人々に役立つことを願っています...私の本当の問題はCORSを十分に理解していなかったことです。

素晴らしい説明へのリンク： http://www.html5rocks.com/en/tutorials/cors/

道を教えてくれて この答え と称賛しています。

Answer 2

サーバーでCORSを有効にしてAccess-Control-Allow-Origin : *を有効にしました。それでもGETメソッドが機能してもPOSTメソッドが機能しない場合は、Content-Typeおよびdataの問題が原因である可能性があります。

まずAngularJSはContent-Type: application/jsonを使ってデータを送信しますが、これは一部のWebサーバー（特にPHP）ではネイティブにシリアル化されていません。彼らにとっては、データをContent-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));
            });
        };

注：$.paramsを使用するようにデータをシリアル化するためにContent-Type: x-www-form-urlencodedを使用しています。あるいは、以下のJavaScript関数を使用することができます。

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

Content-Type: x-www-form-urlencodedリクエストはusername=john&Password=12345形式のPOSTデータのみを取得するため、params({ 'username': $scope.username, 'Password': $scope.Password })を使用してシリアル化します。

Answer 3

Node.jsアプリの場合は、自分のすべてのルートを登録する前にserver.jsファイルに以下のコードを記述します。すべてのレスポンスにヘッダを設定します。また、フライト前の "OPTIONS"呼び出しであれば、応答を適切に終了し、実際のビジネスロジックルートを "ネクスト"せずに（つまり単語？）、すぐにフライト前の応答をクライアントに返します。これが私のserver.jsファイルです。 Stackoverflowの使用に関連するセクションが強調表示されています。

// server.js

// ==================
// BASE SETUP

// import the packages we need
var express    = require('express');
var app        = express();
var bodyParser = require('body-parser');
var morgan     = require('morgan');
var jwt        = require('jsonwebtoken'); // used to create, sign, and verify tokens

// ====================================================
// configure app to use bodyParser()
// this will let us get the data from a POST
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

// Logger
app.use(morgan('dev'));

// -------------------------------------------------------------
// STACKOVERFLOW -- PAY ATTENTION TO THIS NEXT SECTION !!!!!
// -------------------------------------------------------------

//Set CORS header and intercept "OPTIONS" preflight call from AngularJS
var allowCrossDomain = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    if (req.method === "OPTIONS") 
        res.send(200);
    else 
        next();
}

// -------------------------------------------------------------
// STACKOVERFLOW -- END OF THIS SECTION, ONE MORE SECTION BELOW
// -------------------------------------------------------------


// =================================================
// ROUTES FOR OUR API

var route1 = require("./routes/route1");
var route2 = require("./routes/route2");
var error404 = require("./routes/error404");


// ======================================================
// REGISTER OUR ROUTES with app

// -------------------------------------------------------------
// STACKOVERFLOW -- PAY ATTENTION TO THIS NEXT SECTION !!!!!
// -------------------------------------------------------------

app.use(allowCrossDomain);

// -------------------------------------------------------------
//  STACKOVERFLOW -- OK THAT IS THE LAST THING.
// -------------------------------------------------------------

app.use("/api/v1/route1/", route1);
app.use("/api/v1/route2/", route2);
app.use('/', error404);

// =================
// START THE SERVER

var port = process.env.PORT || 8080;        // set our port
app.listen(port);
console.log('API Active on port ' + port);