javascript - فشل AngularJS POST: يحتوي الرد على الاختبار المبدئي على رمز حالة HTTP غير صالح 404




php ajax (2)

حسنًا ، إليكم كيف برزت هذا الأمر. كل ذلك له علاقة بسياسة CORS. قبل طلب POST ، كان Chrome يقدم طلبًا للخيارات المبدئية ، والتي يجب معالجتها والاعتراف بها من قبل الخادم قبل الطلب الفعلي. الآن هذا ليس حقيقة ما أردت لمثل هذا الخادم البسيط. وبالتالي ، فإن إعادة تعيين جانب عميل الرؤوس يمنع الاختبار المبدئي:

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

سيرسل المتصفح الآن POST مباشرة. آمل أن يكون هذا يساعد الكثير من الناس هناك ... مشكلتي الحقيقية لم أفهم كورس بما فيه الكفاية.

رابط لتفسير رائع: http://www.html5rocks.com/en/tutorials/cors/

مجد على هذه الإجابة لتظهر لي الطريق.

أعلم أن هناك الكثير من الأسئلة مثل هذا ، لكن لا شيء رأيته قد أصلح مشكلتي. لقد استخدمت ما لا يقل عن 3 أعمال المصغرة جميعهم يفشلون في إجراء اختبار بسيط ، والذي يجب أن يعيد البيانات مرة أخرى:

العميل 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. لماذا ا؟

تحرير: req / الدقة على النحو المطلوب من قبل مدبب


لتطبيق Node.js ، في ملف server.js قبل تسجيل جميع طرقي الخاصة ، أضع الكود أدناه. يحدد الرؤوس لجميع الردود. كما أنه ينهي الاستجابة بأمان إذا كانت مكالمة "OPTIONS" قبل الرحلة ويرسل على الفور استجابة ما قبل الرحلة مرة أخرى إلى العميل دون "nexting" (هل هذه كلمة؟) لأسفل عبر طرق منطق الأعمال الفعلية. هنا هو ملف server.js الخاص بي. المقاطع ذات الصلة المميزة لاستخدام .

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

// -------------------------------------------------------------
//  -- 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();
}

// -------------------------------------------------------------
//  -- 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

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

app.use(allowCrossDomain);

// -------------------------------------------------------------
//   -- 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);




cors