By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,852 Members | 883 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,852 IT Pros & Developers. It's quick & easy.

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

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

Note: Backend API is working perfectly with POSTMAN.

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
Mar 3 '17 #1
Share this question for a faster answer!
Share on Google+

Post your reply

Sign in to post your reply or Sign up for a free account.