AngularJS POST 실패: 프리플라이트 응답에 비활성 HTTP 상태 코드 404가 있습니다.

AngularJS POST 실패: 프리플라이트 응답에 비활성 HTTP 상태 코드 404가 있습니다.

이런 질문들이 많이 있다는 건 알지만, 제 문제를 해결한 건 본 적이 없어요.저는 이미 최소 3개의 마이크로 프레임웍스를 사용했습니다.모두 단순한 POST 실행에서 실패하고 데이터가 반환됩니다.

각진JS 클라이언트:

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가 요청한 요청/res

편집:

몇 년이 지났지만, 이 부분에 대해 더 언급해야 할 것 같습니다.저는 사실 개발자입니다.백엔드에 대한 요구는 일반적으로 프레임워크가 픽업하여 처리하는 토큰을 사용하여 인증됩니다.이것이 누락되었습니다.저는 사실 이 솔루션이 어떻게 작동했는지 전혀 모르겠습니다.

오리지널:

좋아, 내가 이걸 알아낸 방법은 이거야.그것은 모두 CORS 정책과 관련이 있다.POST 요청 전에 Chrome은 OPTIONS 요청(Pre-flight 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/

길을 가르쳐 준 것에 대해 이 대답에 찬사를 보냅니다.

CORS를 유효하게 하고,Access-Control-Allow-Origin : *서버내의.그래도 이해한다면GET메서드 작업 및POST방법이 작동하지 않는 경우 문제일 수 있습니다.Content-Type그리고.data문제.

첫 번째 각도JS는 다음을 사용하여 데이터를 전송합니다.Content-Type: application/json일부 웹 서버(특히 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;
}

및 사용params({ 'username': $scope.username, 'Password': $scope.Password })연재하다Content-Type: x-www-form-urlencoded만 POST로 가져옵니다.username=john&Password=12345포맷을 지정합니다.

Node.js 앱의 경우, 모든 루트를 등록하기 전에 server.js 파일에 아래에 코드를 입력합니다.모든 응답의 헤더를 설정합니다.또, 프리플라이트 「OPTIONS」콜인 경우, 응답을 정상적으로 종료해, 실제의 비즈니스 로직 루트를 개입시켜 「nexting」(단어인가?)를 실시하지 않고, 곧바로 클라이언트에 프리플라이트 응답을 반송합니다.여기 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);

언급URL : https://stackoverflow.com/questions/33660712/angularjs-post-fails-response-for-preflight-has-invalid-http-status-code-404