"Http failure during parsing" in Angular



我正在尝试将我在Angular中的前端连接到使用开发的Api。NetCore,但我得到以下错误

Http failure during parsing for http://localhost:5000/User/register

尽管出现了错误,用户仍被保存到数据库中。下面是我的休息服务、我的组件ts和后端中的注册方法

休息服务

const endpoint = 'http://localhost:5000/';
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
}),
};
@Injectable({
providedIn: 'root'
})
export class RestService {
constructor(private http: HttpClient) { }
private extractData(res: Response) {
let body = res;
return body || {};
}
addUser(user: User): Observable<User> {
return this.http.post<User>(
endpoint + 'User/register',
JSON.stringify(user),
httpOptions
);
}
}

注册组件.ts

@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {
@Input() userData: User = new User();
constructor(  public rest: RestService,
private route: ActivatedRoute,
private router: Router) { }
ngOnInit(): void {
}
addUser() {
this.rest.addUser(this.userData).subscribe(
(result:any) => {
console.log(result);
this.router.navigate(['/login']);
},
(err) => {
console.log(err);
console.log("DADOS"+JSON.stringify(this.userData));
}
);
}
}

后端中的方法

[AllowAnonymous]
[HttpPost("register")]
public IActionResult Register([FromBody]RegisterModel model)
{
var user = _mapper.Map<User>(model);
try
{
// create user
_userService.Create(user, model.Password);
return Ok("Successful registration");
}
catch (AppException ex)
{
// return error message if there was an exception
return BadRequest(new { message = ex.Message });
}
}

您应该在后端只返回文本或json。当在Ok("成功注册"(上返回文本时,它在BadRequest(new{message=ex.message}(上返回JSON模型。

它应该看起来像:

[AllowAnonymous]
[HttpPost("register")]
public IActionResult Register([FromBody]RegisterModel model)
{
var user = _mapper.Map<User>(model);
try
{
// create user
_userService.Create(user, model.Password);
return Ok("Successful registration");
}
catch (AppException ex)
{
// return error message if there was an exception
return BadRequest(ex.Message);
}
}

然后,您应该在httpOptions中发送responseType参数。

const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'responseType': 'text'
}),
};

最新更新