Eliza Maria Ответов: 0

Проблема с методом post в угловом сервисе

Привет!

У меня есть проект angular 8 dotnet api,в котором у меня есть проблема с методом post в register.service.ts, поскольку он должен возвращать 200 ok, но вместо этого он возвращает 415 неподдерживаемых типов носителей.Я борюсь с этой ошибкой в течение некоторого времени, и я понял, что она появляется, когда промежуточное программное обеспечение CORS не включено должным образом.Я сделал это в startup.cs следующим образом:
 public void ConfigureServices(IServiceCollection services)
        {
           
            services.AddDbContext<DataContext>(options => options.UseMySql(Configuration.GetConnectionString("DataContext")));
            services.AddControllersWithViews();
            services.AddApiVersioning(options =>
 {
  options.UseApiBehavior = true;
  options.AssumeDefaultVersionWhenUnspecified = true;
 });
 
 
            // In production, the Angular files will be served from this directory
            services.AddSpaStaticFiles(configuration =>
            {
                configuration.RootPath = "ClientApp/dist/";
            });
            services.AddCors(options =>
{
    options.AddPolicy("CorsPolicy",
        builder => builder.AllowAnyOrigin()
        .AllowAnyMethod()
        .AllowAnyHeader().WithOrigins("http://localhost:5001"));
});
 services.AddScoped(typeof(IUserService<>), typeof(UserService<>));
        }

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
       {
           if (env.IsDevelopment())
           {
               app.UseDeveloperExceptionPage();
           }
           else
           {
               app.UseExceptionHandler("/Error");
               // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
               app.UseHsts();
           }
          app.UseOptions();

           app.UseHttpsRedirection();
           app.UseStaticFiles();
           if (!env.IsDevelopment())
           {
               app.UseSpaStaticFiles();
           }

           app.UseRouting();
           app.UseCors("CorsPolicy");
           app.UseEndpoints(endpoints =>
           {
               endpoints.MapControllerRoute(
                   name: "default",
                   pattern: "{controller}/{action=Index}/{id?}");
           });

           app.UseSpa(spa =>
           {
               // To learn more about options for serving an Angular SPA from ASP.NET Core,
               // see https://go.microsoft.com/fwlink/?linkid=864501

               spa.Options.SourcePath = "ClientApp";

               if (env.IsDevelopment())
               {
                   spa.UseAngularCliServer(npmScript: "start");
               }
           });
       }

Я также включаю CORS в контроллере следующим образом:
 [EnableCors("CorsPolicy")]
[Produces("application/json")]
    [Route("[controller]")]
    [ApiController]
    public class RegisterController : ControllerBase



это и есть register.service.ts:
import { Injectable } from '@angular/core';
import { HttpClient, HttpClientModule, HttpHeaders } from '@angular/common/http';
import { environment } from 'src/environments/environment'; import { Register } from '../Models/register';
import { Observable, throwError } from 'rxjs';
import { retry, catchError } from 'rxjs/operators';




@Injectable({
  providedIn: 'root'
})
export class RegisterService {

baseurl = 'http://localhost:5001/register/';
  constructor(private http: HttpClient) { }
Create(user): Observable<Register> {
  const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json; charset=UTF-8'}) };
  return this.http.post<Register>(this.baseurl, JSON.stringify(user), httpOptions).pipe(retry(1), catchError(this.errorHandler));
  }


Как вы можете видеть,я объявляю переменную baseurl для того, чтобы передать ее методу вместе с заголовком, который имеет формат application/json.Проблема в том,что по какой-то причине ошибка все еще сохраняется,но для метода get он отображает данные в "регистре" в формате json без каких-либо проблем.
В консоли у меня есть следующие ошибки:
zone-evergreen.js:2828 POST http://localhost:5001/register/ net::ERR_EMPTY_RESPONSE

core.js:5873 ERROR Error Code: 0
Message: Http failure response for http://localhost:5001/register/: 0 Unknown Error


Опять же,я читал, что "0 неизвестная ошибка" происходит потому, что промежуточное программное обеспечение CORS не установлено должным образом, но я проверил его миллион раз, и это кажется прекрасным.У меня нет никаких идей, почему это не работает, потому что теоретически это должно быть.В моем register.component.ts у меня есть следующее:
import { Component, OnInit, Injectable, ChangeDetectorRef, ChangeDetectionStrategy, Input } from '@angular/core';
import { RegisterService } from '../services/register.service';
import { FormBuilder, FormGroup} from '@angular/forms';
import { Register } from '../Models/register';
import { Router, ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
@Injectable({ providedIn: 'root' })
export class RegisterComponent implements OnInit {
 userIdForDelete: number = null;
@Input() user: Register = new Register();
 form: FormGroup;
 actionType: string;
 formName: string;
formPassword:string;
 userId: number;
 formEmail: string;
 message: any;

constructor(private regService:RegisterService,private formBuilder: FormBuilder, private avRoute:ActivatedRoute, private router:Router ) { 
  const idParam = 'id';
  this.actionType = 'Add';
  this.formName = 'name';
  this.formEmail = 'email';
  this.formPassword = 'password';
  if (this.avRoute.snapshot.params[idParam]) {
    this.userId = this.avRoute.snapshot.params[idParam];
  }
  this.form = this.formBuilder.group({
    userId: 0,
    name: [''],
    email: [''],
    password: ['']
  });
}
ngOnInit() {

  }
PostRegister() {
if (!this.form.valid) {
  return;
}
if (this.actionType === 'Add') {
// tslint:disable-next-line:prefer-const
let register: Register = {
email: this.form.get(this.formEmail).value,
name: this.form.get(this.formName).value,
password: this.form.get(this.formPassword).value
};
this.regService.Create(register).subscribe((data) => {
this.message('Registered succesfully');
});
}
}
}


PostRegister() затем я назначаю его событию ngSubmit в моем register.component.html а именно::
<form [formGroup]="form" (ngSubmit)="PostRegister()" #formDir="ngForm" novalidate>

Пожалуйста, дайте мне знать, если у вас есть какие-то мысли о том, почему ошибка все еще сохраняется, учитывая, что все выглядит нормально.Любая помощь будет очень признательна, и дайте мне знать, если вам нужна дополнительная информация о коде.С наилучшими пожеланиями!

Что я уже пробовал:

Я попытался установить имя маршрута в моем методе UserController.cs for post следующим образом:
[Маршрут("PostRegister")]
[HttpPost]
       public async Task<ActionResult<Register>> PostRegister([FromBody] Register register)
       {
           if (!ModelState.IsValid)
       {
           return BadRequest(ModelState);
       }

       _repo.Add(register);
       var save = await _repo.SaveAsync(register);
            return CreatedAtAction(nameof(GetRegister), new { id = register.Id }, register);
       }

и я получил метод 405, не разрешенный от публикации по url:https://localhost:5001/register/.


Я также изменил константу httpOptions на эту:
const httpOptions = { headers: new HttpHeaders({ 'Content-Type':'application/x-www-form-urlencoded','Access-Control-Allow-Origins':'*'})};

0 Ответов