Угловой POST и .NET Core WEB Api - 401 Несанкционированная ошибка / CORS - PullRequest
Новая
       31

Угловой POST и .NET Core WEB Api - 401 Несанкционированная ошибка / CORS

2 голосов
/ 07 ноября 2019

У меня есть отдельные проекты для front-end (Angular) и back-end (.NET Core WEB Api). Я настроил CORS, а также аутентификацию Windows AD. Все это хорошо работает для вызовов GET, но у меня возникают проблемы с POST. Я получаю следующую ошибку. 

OPTIONS http://localhost:50000/api/data/Update 401 (Unauthorized)
Access to XMLHttpRequest at 'http://localhost:50000/api/data/Update' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Error: Http failure response for http://localhost:50000/api/data/Update: 0 Unknown Error

user.component.ts 

update(data: NgForm) {
if (data.form.valid) {
  this.service.update(data.value)
    .subscribe(
      res => {
        console.log('Result: ' + res);
      },
      err => {
        console.log('Error: ' + err.message);
    });
  }
}

service.ts 

headerOptions = new HttpHeaders({ 'Content-Type': 'application/x-www-form-urlencoded', 'Access- 
Control-Allow-Origin': '*' });

update(data: Form) {
  return this.http.post(this.apiUrl + '/data/Update', data, { headers: this.headerOptions });
}

Контроллер 

[HttpPost("[action]")]
public string Update([FromForm] User data)
  {
    if (data != null)
  {
    return "Ok";
  }
    else
  {
    return "Data is null";
  }
}

CORS extension 

    public static void ConfigureCors(this IServiceCollection services)
    {
        services.AddCors(options =>
        {
            options.AddPolicy("CorsPolicy", 
                builder => builder
                .WithOrigins("http://localhost:4200")
                .AllowAnyMethod()
                .AllowAnyHeader()
                .AllowCredentials());
        });
    }

У меня также есть перехватчик внутри Angular, который отправляет «withCredentials: true» для всех вызовов.

Имейте в виду, что все мои вызовы GET работают без проблем,У меня только проблемы с POST. Если я изменю метод на угловой стороне с POST на GET, метод Update из внутреннего интерфейса будет вызываться без проблем ...

Ответы [ 2 ]

1 голос
/ 14 ноября 2019

Мне удалось получить доступ к моему контроллеру и данным POST после того, как я сделал следующие изменения:

  1. Изменен атрибут контроллера с «FromForm» на «FromBody» (спасибо Дэниелу об этом).

  2. Изменен метод угловой записи на следующий 

     headerOptions = new HttpHeaders({ 'Content-Type': 'application/json' 
 });

 update(data) {
 return this.http.post(this.apiUrl + '/data/Update', JSON.stringify(data), { 
 headers: this.headerOptions });
 }

  3. Установить "anonymousAuthentication: true" внутри моего launchSettings.json.

  4. На этом этапе у меня возникла проблема, так как мой пользователь был пустым при запуске приложения, поэтому мне пришлось реализовать новое промежуточное программное обеспечение, найденное по этому вопросу ntlm anon , чтобы обрабатывать неаутентифицированного пользователя при запуске приложения.

  5. Позвоните в промежуточное ПО внутри Configure (Startup.cs), просто обратите внимание на заказ. Вот мое: 

    app.UseCors("CorsPolicy");
    app.UseAnonMiddleware();
    app.UseAdMiddleware();
    app.UseMvc();

И это все.

0 голосов
/ 07 ноября 2019

Разные порты в точности совпадают с разными приложениями, поэтому ваш WebApi должен разрешать CORS, как 

 [EnableCors(origins: "http://localhost:4200", headers: "*", methods: "*")]
    public class TestController : ApiController
    {
        // Controller methods not shown...
    }

Однако, если это одно и то же приложение, и все, что вам нужно, - это чтобы все работали в одном и том жепорт, то, что я думаю, вам нужно сделать:

Добавить пакет nuget Microsoft.AspNetCore.SpaServices.Extensions.

И затем настроить в вас Startup.cs Angular Cli like: 

app.UseStaticFiles();
app.UseSpaStaticFiles();

app.UseMvc(routes =>
 {
    routes.MapRoute(name: "default",emplate: "{controller}/{action=Index}/{id?}");
            });

            app.UseSpa(spa =>
            {
                spa.Options.SourcePath = "ClientApp";

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

Важно :

Чтобы узнать больше о возможностях обслуживания Angular SPA в ASP.NET Core, см. https://go.microsoft.com/fwlink/?linkid=864501

Это позволяет вам, если вы хотите, чтобы угловая работа выполнялась на отдельном порту или на том же порту, что и ваше основное приложение .net.

...