[javascript] AngularJS POST Fails: Response for preflight has invalid HTTP status code 404

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 req/res headers

This question is related to javascript php angularjs ajax cors http-status-code-415

The answer is


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.


You have enabled CORS and enabled Access-Control-Allow-Origin : * in the server.If still you get GET method working and POST method is not working then it might be because of the problem of Content-Type and data problem.

First AngularJS transmits data using Content-Type: application/json which is not serialized natively by some of the web servers (notably PHP). For them we have to transmit the data as Content-Type: x-www-form-urlencoded

Example :-

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

Note : I am using $.params to serialize the data to use Content-Type: x-www-form-urlencoded. Alternatively you can use the following javascript function

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

and use params({ 'username': $scope.username, 'Password': $scope.Password }) to serialize it as the Content-Type: x-www-form-urlencoded requests only gets the POST data in username=john&Password=12345 form.


For a Node.js app, in the server.js file before registering all of my own routes, I put the code below. It sets the headers for all responses. It also ends the response gracefully if it is a pre-flight "OPTIONS" call and immediately sends the pre-flight response back to the client without "nexting" (is that a word?) down through the actual business logic routes. Here is my server.js file. Relevant sections highlighted for Stackoverflow use.

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

Questions with javascript tag:

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax Drag and drop menuitems Is it possible to execute multiple _addItem calls asynchronously using Google Analytics? DevTools failed to load SourceMap: Could not load content for chrome-extension TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined raised when starting react app What does 'x packages are looking for funding' mean when running `npm install`? SyntaxError: Cannot use import statement outside a module SameSite warning Chrome 77 "Uncaught SyntaxError: Cannot use import statement outside a module" when importing ECMAScript 6 Why powershell does not run Angular commands? Typescript: No index signature with a parameter of type 'string' was found on type '{ "A": string; } Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop Push method in React Hooks (useState)? JS file gets a net::ERR_ABORTED 404 (Not Found) React Hooks useState() with Object useState set method not reflecting change immediately Can't perform a React state update on an unmounted component UnhandledPromiseRejectionWarning: This error originated either by throwing inside of an async function without a catch block Can I set state inside a useEffect hook internal/modules/cjs/loader.js:582 throw err How to post query parameters with Axios? How to use componentWillMount() in React Hooks? React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory in ionic 3 How can I force component to re-render with hooks in React? What is useState() in React? How to call loading function with React useEffect only once Objects are not valid as a React child. If you meant to render a collection of children, use an array instead How to reload current page? Center content vertically on Vuetify Getting all documents from one collection in Firestore ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment How can I add raw data body to an axios request? Sort Array of object by object field in Angular 6 Uncaught SyntaxError: Unexpected end of JSON input at JSON.parse (<anonymous>) Axios Delete request with body and headers? Enable CORS in fetch api Vue.js get selected option on @change Bootstrap 4 multiselect dropdown Cross-Origin Read Blocking (CORB) Angular 6: How to set response type as text while making http call

Questions with php tag:

I am receiving warning in Facebook Application using PHP SDK Pass PDO prepared statement to variables Parse error: syntax error, unexpected [ Preg_match backtrack error Removing "http://" from a string How do I hide the PHP explode delimiter from submitted form results? Problems with installation of Google App Engine SDK for php in OS X Laravel 4 with Sentry 2 add user to a group on Registration php & mysql query not echoing in html with tags? How do I show a message in the foreach loop? Target class controller does not exist - Laravel 8 Message: Trying to access array offset on value of type null Array and string offset access syntax with curly braces is deprecated Visual Studio Code PHP Intelephense Keep Showing Not Necessary Error How to fix "set SameSite cookie to none" warning? The POST method is not supported for this route. Supported methods: GET, HEAD. Laravel Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? dyld: Library not loaded: /usr/local/opt/icu4c/lib/libicui18n.62.dylib error running php after installing node with brew on Mac What does double question mark (??) operator mean in PHP Post request in Laravel - Error - 419 Sorry, your session/ 419 your page has expired PHP with MySQL 8.0+ error: The server requested authentication method unknown to the client php mysqli_connect: authentication method unknown to the client [caching_sha2_password] Converting a POSTMAN request to Curl Composer require runs out of memory. PHP Fatal error: Allowed memory size of 1610612736 bytes exhausted Expected response code 250 but got code "530", with message "530 5.7.1 Authentication required Issue in installing php7.2-mcrypt Xampp localhost/dashboard How can I run specific migration in laravel How to change PHP version used by composer Laravel 5 show ErrorException file_put_contents failed to open stream: No such file or directory Artisan migrate could not find driver phpMyAdmin ERROR: mysqli_real_connect(): (HY000/1045): Access denied for user 'pma'@'localhost' (using password: NO) Ajax LARAVEL 419 POST error Laravel 5.5 ajax call 419 (unknown status) laravel 5.5 The page has expired due to inactivity. Please refresh and try again "The page has expired due to inactivity" - Laravel 5.5 How to increment a letter N times per iteration and store in an array? Can't install laravel installer via composer Only on Firefox "Loading failed for the <script> with source" Is there way to use two PHP versions in XAMPP? How to prevent page from reloading after form submit - JQuery laravel Eloquent ORM delete() method No Application Encryption Key Has Been Specified General error: 1364 Field 'user_id' doesn't have a default value How to logout and redirect to login page using Laravel 5.4? How to uninstall an older PHP version from centOS7 How to Install Font Awesome in Laravel Mix PDO::__construct(): Server sent charset (255) unknown to the client. Please, report to the developers Laravel - htmlspecialchars() expects parameter 1 to be string, object given How to downgrade php from 7.1.1 to 5.6 in xampp 7.1.1?

Questions with angularjs tag:

AngularJs directive not updating another directive's scope ERROR in Cannot find module 'node-sass' CORS: credentials mode is 'include' CORS error :Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response WebSocket connection failed: Error during WebSocket handshake: Unexpected response code: 400 Print Html template in Angular 2 (ng-print in Angular 2) $http.get(...).success is not a function Angular 1.6.0: "Possibly unhandled rejection" error Find object by its property in array of objects with AngularJS way Error: Cannot invoke an expression whose type lacks a call signature Error : getaddrinfo ENOTFOUND registry.npmjs.org registry.npmjs.org:443 Disable Chrome strict MIME type checking Consider marking event handler as 'passive' to make the page more responsive Angular get object from array by Id SyntaxError: Unexpected token o in JSON at position 1 Failed to load resource 404 (Not Found) - file location error? Use of symbols '@', '&', '=' and '>' in custom directive's scope binding: AngularJS Usage of $broadcast(), $emit() And $on() in AngularJS How to return data from promise Send FormData with other field in AngularJS check null,empty or undefined angularjs How to run html file using node js how to find array size in angularjs How to filter array when object key value is in array How do I fix the npm UNMET PEER DEPENDENCY warning? Send multipart/form-data files with angular using $http Display number always with 2 decimal places in <input> Angular pass callback function to child component as @Input similar to AngularJS way ng-if check if array is empty Firebase TIMESTAMP to date and Time What is the Angular equivalent to an AngularJS $watch? Generate PDF from HTML using pdfMake in Angularjs AngularJS POST Fails: Response for preflight has invalid HTTP status code 404 Why and when to use angular.copy? (Deep Copy) How to make use of ng-if , ng-else in angularJS Check if value exists in the array (AngularJS) How to check for an empty object in an AngularJS view TypeError: window.initMap is not a function CORS with spring-boot and angularjs not working File Upload with Angular Material AngularJS $watch window resize inside directive Unexpected token < in first line of HTML Module is not available, misspelled or forgot to load (but I didn't) Assign value from successful promise resolve to external variable How to send POST in angularjs with multiple params? ng if with angular for string contains Should I use typescript? or I can just use ES6? How do I trim() a string in angularjs? How to push object into an array using AngularJS Adding class to element using Angular JS

Questions with ajax tag:

Getting all files in directory with ajax Cross-Origin Read Blocking (CORB) Jquery AJAX: No 'Access-Control-Allow-Origin' header is present on the requested resource Fetch API request timeout? How do I post form data with fetch api? Ajax LARAVEL 419 POST error Laravel 5.5 ajax call 419 (unknown status) How to allow CORS in react.js? Angular 2: How to access an HTTP response body? How to post a file from a form with Axios console.log(result) returns [object Object]. How do I get result.name? $http.get(...).success is not a function What is difference between Axios and Fetch? Make XmlHttpRequest POST using JSON React Js: Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 Response to preflight request doesn't pass access control check How can I send an Ajax Request on button click from a form with 2 buttons? API Gateway CORS: no 'Access-Control-Allow-Origin' header Download pdf file using jquery ajax Getting request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource AngularJS POST Fails: Response for preflight has invalid HTTP status code 404 Why my $.ajax showing "preflight is invalid redirect error"? "Mixed content blocked" when running an HTTP AJAX operation in an HTTPS page Jquery in React is not defined Laravel csrf token mismatch for ajax POST Request How to write data to a JSON file using Javascript loading json data from local file into React JS Load More Posts Ajax Button in WordPress jQuery ajax request being block because Cross-Origin CORS header 'Access-Control-Allow-Origin' missing How do I cancel an HTTP fetch() request? Send form data with jquery ajax json How to refresh table contents in div using jquery/ajax Ajax post request in laravel 5 return error 500 (Internal Server Error) React JS - Uncaught TypeError: this.props.data.map is not a function Uncaught TypeError: Cannot read property 'appendChild' of null Required request body content is missing: org.springframework.web.method.HandlerMethod$HandlerMethodParameter No 'Access-Control-Allow-Origin' header is present on the requested resource error Synchronous XMLHttpRequest warning and <script> React.js create loop through Array Reinitialize Slick js after successful ajax call jQuery has deprecated synchronous XMLHTTPRequest How to call a php script/function on a html button click jQuery Refresh/Reload Page if Ajax Success after time Solve Cross Origin Resource Sharing with Flask Stupid error: Failed to load resource: net::ERR_CACHE_MISS SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data Windows.history.back() + location.reload() jquery AJAX jQuery refresh div every 5 seconds Dynamically add item to jQuery Select2 control that uses AJAX

Questions with cors tag:

Axios having CORS issue Cross-Origin Read Blocking (CORB) Jquery AJAX: No 'Access-Control-Allow-Origin' header is present on the requested resource How to allow CORS in react.js? Set cookies for cross origin requests XMLHttpRequest blocked by CORS Policy How to enable CORS in ASP.net Core WebAPI No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API How to overcome the CORS issue in ReactJS Trying to use fetch and pass in mode: no-cors CORS: credentials mode is 'include' Enabling CORS in Cloud Functions for Firebase Uncaught (in promise) TypeError: Failed to fetch and Cors error CORS error :Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response Access to Image from origin 'null' has been blocked by CORS policy 'Access-Control-Allow-Origin' issue when API call made from React (Isomorphic app) Spring security CORS Filter Adding Access-Control-Allow-Origin header response in Laravel 5.3 Passport How to configure CORS in a Spring Boot + Spring Security application? What is an opaque response, and what purpose does it serve? CORS with POSTMAN No 'Access-Control-Allow-Origin' header in Angular 2 app How can I enable CORS on Django REST Framework Response to preflight request doesn't pass access control check XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header API Gateway CORS: no 'Access-Control-Allow-Origin' header Spring CORS No 'Access-Control-Allow-Origin' header is present How to create cross-domain request? AngularJS POST Fails: Response for preflight has invalid HTTP status code 404 No 'Access-Control-Allow-Origin' header is present on the requested resource - Resteasy Laravel 5.1 API Enable Cors Request header field Access-Control-Allow-Headers is not allowed by itself in preflight response CORS with spring-boot and angularjs not working What are the integrity and crossorigin attributes? CORS header 'Access-Control-Allow-Origin' missing Why is an OPTIONS request sent and can I disable it? AngularJS: No "Access-Control-Allow-Origin" header is present on the requested resource How to allow Cross domain request in apache2 Asp.Net WebApi2 Enable CORS not working with AspNet.WebApi.Cors 5.2.3 No 'Access-Control-Allow-Origin' header is present on the requested resource error MVC web api: No 'Access-Control-Allow-Origin' header is present on the requested resource How can I fix the 'Missing Cross-Origin Resource Sharing (CORS) Response Header' webfont issue? Solve Cross Origin Resource Sharing with Flask Request header field Access-Control-Allow-Headers is not allowed by Access-Control-Allow-Headers How to enable CORS in flask Font from origin has been blocked from loading by Cross-Origin Resource Sharing policy How to enable CORS on Firefox? Keep getting No 'Access-Control-Allow-Origin' error with XMLHttpRequest What exactly does the Access-Control-Allow-Credentials header do? Firefox 'Cross-Origin Request Blocked' despite headers

Questions with http-status-code-415 tag:

How can I get the status code from an http error in Axios? Curl to return http status code along with the response Job for httpd.service failed because the control process exited with error code. See "systemctl status httpd.service" and "journalctl -xe" for details How to deal with http status codes other than 200 in Angular 2 HTTP 415 unsupported media type error when calling Web API 2 endpoint AngularJS POST Fails: Response for preflight has invalid HTTP status code 404 Laravel - Return json along with http status code Swift Alamofire: How to get the HTTP response status code Spring Boot Rest Controller how to return different HTTP status codes? Http 415 Unsupported Media type error with JSON HTTP status code 0 - Error Domain=NSURLErrorDomain? How to get HttpClient returning status code and response body? POST JSON fails with 415 Unsupported media type, Spring 3 mvc Returning http status code from Web Api controller Right HTTP status code to wrong input Return HTTP status code 201 in flask jQuery: How to get the HTTP status code from within the $.ajax.error method? Script to get the HTTP status code of a list of urls? What's the most appropriate HTTP status code for an "item not found" error page How to return a 200 HTTP Status Code from ASP.NET MVC 3 controller Should a 502 HTTP status code be used if a proxy receives no response at all? JAX-RS — How to return JSON and HTTP status code together? Does an HTTP Status code of 0 have any meaning? System.Net.WebException HTTP status code REST HTTP status codes for failed validation or invalid duplicate What HTTP status response code should I use if the request is missing a required parameter? How do I get the HTTP status code with jQuery? HTTP status code for update and delete? Why is AJAX returning HTTP status code 0? What's an appropriate HTTP status code to return by a REST API service for a validation failure? What is the difference between HTTP status code 200 (cache) vs status code 304? Getting Http Status code number (200, 301, 404, etc.) from HttpWebRequest and HttpWebResponse