Post request with AngularJS failed with Response for preflight has invalid HTTP status code 404 in Slim Framework

Question

I am developing login form in angular js using slim api integration.I am using multiple api in slim on this project but the error shown only when i am trying to login using post request. In that when i am send the login request using post request to the server it throwing the error on console like.

Failed to load resource: the server responded with a status of 404 (Not Found)
XMLHttpRequest cannot load http://example.com/Youin-api/v1/business/login. Response for preflight has invalid HTTP status code 404

My backend code:

$app->post('/business/login', function() use($app) {
 $postvar = json_decode($app->request->getBody(), true);
verifyRequiredParams(array('emailid', 'pwd'));
$email = $postvar['emailid'];
$pwd = $postvar['pwd'];

// validating email address
validateEmail($email);

$db = new DbHandler();
$response = $db->loginBuser($email, $pwd);

// echo json response
echoRespnse(200, $response);
});

controller:

public function loginBuser($email, $pwd) 
 {
        $response = array();
        $stmt = $this->conn->prepare("SELECT BID from business_login_tbl WHERE emailid = ? and login_pwd = ?";
        $stmt->bind_param("ss",$email,$pwd);
        $stmt->execute();
        $stmt->store_result();
        $num_rows = $stmt->num_rows;
        $stmt->close();
        if($num_rows > 0)
    {
            $response["code"] = "Success";
            $response["error"] = false;
            $response["user"] = $this->getBusinessuserByEmail($email);
        }
        else
        {
            $response["code"] = "failed";
            $response["error"] = true;
            $response["message"] = "Oops! Username of password Missmatch";
    }
    return $response;
}

my echo function:

function echoRespnse($status_code, $response) {
        $app = \Slim\Slim::getInstance();
        // Http response code
        $app->status($status_code);
        // setting response content type to json
        $app->contentType('application/json');
        echo json_encode($response);
    }

i am using cors also:

$app = new \Slim\Slim();
$response = $app->response();
$response>header('Access-Control-Allow-Origin', 'http://example.com');
$response->header('Access-Control-Allow-Headers', 'Content-Type, X-Requested-With, X-authentication, X-client');
$response->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');

I am don't know what wrong with my front and back end code.Thanks in advance..!

Possible duplicate of [AngularJS POST Fails: Response for preflight has invalid HTTP status code 404](http://stackoverflow.com/questions/33660712/angularjs-post-fails-response-for-preflight-has-invalid-http-status-code-404) — illeb, Aug 12 '16 at 09:45
no it's not a duplicate.i am using slim framework and also the error is only showing when i am trying to login.i am using multiple urls in slim on same project. — dhamo dharan, Aug 12 '16 at 09:53

score 1 · Answer 1 · answered Aug 12 '16 at 10:02

1

When you make a request via $http service with Content-Type application/json and custom headers(X-...), the browser does a preflight request to check CORS headers. The preflight requests is just an HTTP OPTIONS request to the specified endpoint. If your API does not implement the OPTIONS handling you probably get the 404 error and cannot process the request.

answered Aug 12 '16 at 10:02

kpentchev

3,040
2
24
41

okey, i am accept it.how can i implement this on slim freamework..? – dhamo dharan Aug 12 '16 at 10:06
I am enable it but still error not cleared.$app = new \Slim\Slim(); $response = $app->response(); $response>header('Access-Control-Allow-Origin', 'http://example.com'); $response->header('Access-Control-Allow-Headers', 'Content-Type, X-Requested-With, X-authentication, X-client'); $response->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS'); – dhamo dharan Aug 12 '16 at 10:22
I am not familiar with slim, but something like this should do it: `$app->options('', function () { // Your logic here.. });` – kpentchev Aug 12 '16 at 11:05

score 0 · Answer 2 · answered Aug 12 '16 at 09:52

It seems that your API doesn't have the endpoint that you are calling, or your implementation rises an error which leads to 404 (maybe the user does not exists). Which url are you calling? Do you have something like this in your backend?

$app->post('<login-url>', function () {
    // Your logic here..
});

If you provide some more info we can investigate and try to help you.

score 0 · Answer 3 · answered Aug 12 '16 at 14:44

The problem you are running into is CORS.

Cross-Origin Resource Sharing.

I recently published some docs on how to enable it.

http://www.slimframework.com/docs/cookbook/enable-cors.html

Take a look and let me know if you have any questions or run into any problems.

Post request with AngularJS failed with Response for preflight has invalid HTTP status code 404 in Slim Framework

3 Answers3