Error 500 (Internal Server Error) between API Laravel 5.4 and Angular 2

When i post form angular form to API Laravel i get error 500 (Internal Server Error) in console .... why?

My Cors.php in Laravel is:

namespace App\Http\Middleware;

use Closure;

class Cors
{
/**
 * Handle an incoming request.
 *
 * @param  \Illuminate\Http\Request  $request
 * @param  \Closure  $next
 * @return mixed
 */
public function handle($request, Closure $next)
{
    return $next($request)
    ->header('Access-Control-Allow-Origin', '*')
    ->header('Access-Control-Allow-Credentials','true')
    ->header('Access-Control-Allow','GET,POST,PUT,PATCH,DELELE,OPTIONS')
    ->header('Access-Control-Allow-Headers','Content-Type, Authorization,X-XSRF-TOKEN,X-CSRF-TOKEN','CSRF-TOKEN','XSRF-TOKEN');
   }
}

and in register.component.ts:

import { Component,OnInit,Input } from '@angular/core';
import { Router } from '@angular/router';
import { NgForm } from '@angular/forms';
import { UserService } from '../../services/user.service';

@Component({
  styleUrls: ['../../templates/users/register.component.css'],
  templateUrl: '../../templates/users/register.component.html',
})

export class RegisterComponent {
title = 'register';

constructor(private _router: Router,private UserService: UserService){

}

ngOnInit() {

}
onSubmit(form:NgForm){
  this.UserService.register(form.value);
  }
}

and user.service.ts:

import { Injectable } from '@angular/core';
 import { Http,Response,Headers } from '@angular/http';
import 'rxjs/Rx';
 import { Observable } from 'rxjs';


  @Injectable()
  export class UserService{
  constructor(private http: Http){

  }

   register( data : Object){
    const body = JSON.stringify({data:data});
    const headers = new Headers({'Content-Type':'application/json'});
    return this.http.post('http://localhost/etqan/etqan_lara/public/api/user',body,{headers:headers}).subscribe((data2) => console.log(data2));
     }
}

and register.component.html is:

  <!-- Header --> 
  <header>
    <div class="container">
        <div class="intro-text wow fadeInDown animated">
            <div class="row">
                <div class="col-md-4 col-md-offset-4">
                    <div class="wrap">
                        <p class="form-title">مستخدم جديد</p>
                        <form class="login" #f="ngForm" (ngSubmit)="onSubmit(f)"> 
                        <input type="text" placeholder="اسم المستخدم" name="username" ngModel />
                        <input type="text" placeholder="البريد الالكتروني" name="email"  ngModel />
                        <input type="password" placeholder="كلمة المرور" name="password"  ngModel />
                        <input type="password" placeholder="تأكيد كلمة المرور" name="repassword" ngModel />
                        <input type="submit" value="تسجيل" class="btn btn-success btn-sm" />
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
<!-- Header End -->

pls i need resolve this problem ... thanks alot

via khaledbelal