Angular 7 to dotnetcore 2.1 веб-вызов API не дает ответа - PullRequest
0 голосов
/ 16 декабря 2018

ниже - код из login.component.ts,

login() {
const val = this.form.value;

if (val.email && val.password) {
  this.authService.login(val.email, val.password)
    .subscribe(
      data => {

        if (data && data.Token) {
          // store user details and jwt token in local storage to keep user logged in 
          //between page refreshes
          localStorage.setItem('currentUser', JSON.stringify(data));
          console.log("user logged in");
          this.router.navigate([this.returnUrl]);
        } else {
          console.log("user not logged in");
        }

      },
      error => {
        this.error = error;
      });
 }
}

ниже - код службы angular,

login(email: string, password: string) {
 return this.http.post<User>(this.baseUrl + "Authenticate", { email, 
password }, httpOptions);
}

ниже - код действия веб-API dotnetcore 2.1,

using System;
using System.IdentityModel.Tokens.Jwt;
using System.Linq;
using System.Security.Claims;
using System.Text;
using API.Utilities;
using Business.Models;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Options;
using Microsoft.IdentityModel.Tokens;


namespace API.Controllers
{
  [Authorize]
  [Produces("application/json")]
  [Route("api/[controller]")]
  public class UsersController : BaseController
{
    private readonly AppSettings _appSettings;

    public UsersController(IOptions<AppSettings> appSettings)
    {          
        _appSettings = appSettings.Value;
    }

    [AllowAnonymous]
    [HttpPost]
    [Route("Authenticate")]
    public IActionResult Authenticate([FromBody]User userParam)
    {
        var user = Authenticate(userParam.Email, userParam.Password);

        if (user == null)
            return BadRequest(new { message = "Username or password is incorrect" });

        return Ok(user);
    }



    public User Authenticate(string username, string password)
    {
        //////code goes

        return user;
    }


}
} 

}

В фиддлере всегда я вижу свой почтовый запрос с длиной -1.Не знаете, в чем проблема, какая-либо помощь? attached fiddler screenshot for reference

Ниже приведены из файла startup.cs.Есть ли какие-либо недостатки в моих настройках CORS для решения webnet API dotnetcore2.1

  public void ConfigureServices(IServiceCollection services)
    {
        services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1).
            AddJsonOptions(options => {
            options.SerializerSettings.ContractResolver = new DefaultContractResolver();
        });

        services.AddDistributedMemoryCache();

        services.AddSession(options => {
            // Set a short timeout for easy testing.
            options.IdleTimeout = TimeSpan.FromSeconds(36000);
            options.Cookie.HttpOnly = true;
        });

        services.AddCors(options => {
            options.AddPolicy("CorsPolicy",
            builder => builder.AllowAnyOrigin()
            .AllowAnyMethod()
            .AllowAnyHeader()
            .AllowCredentials());
        });
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseHsts();
        }

        app.UseStaticFiles();

        app.UseCors(x => x
        .AllowAnyOrigin()
        .AllowAnyMethod()
        .AllowAnyHeader()
        .AllowCredentials());
        app.UseSession();
        app.UseHttpsRedirection();
        app.UseAuthentication();
        app.UseMvc();

    }

Ответы [ 3 ]

0 голосов
/ 11 января 2019

Вам следует принять во внимание, что ваша служба WEB API доступна из порта, отличного от порта вашего Angular UI.В режиме разработки находится ваш пользовательский интерфейс Angular Cli.Это означает, что включение CORS для вашего WEB API не обязательно включает их для пользовательского интерфейса Angular.

Судя по изображению, которое вы разместили, URL вашего веб-API будет http://localhost:44389, а referer - http://localhost:4200.

Один из способов обойти это на этапе разработки - добавить в корневую папку ClientApp файл proxyconfig.json с конфигурацией, аналогичной:

{
  "/api/*": {
  "target": "https://localhost:44389",
  "secure": true,
  "changeOrigin": true
  }
}

Таким образом, браузер интерпретируетчто запросы от вашего Angular UI к вашему WEB API происходят из одного источника.

Если ваш WEB API и Angular UI должны размещаться на одном сервере в производственном режиме, я бы рекомендовал избегать CORS.Вот хорошая статья на эту тему: https://medium.freecodecamp.org/the-best-ways-to-connect-to-the-server-using-angular-cli-b0c6b699716c

Примечание: вам может понадобиться подать файл proxyconfig.json, вот как: https://www.codeproject.com/Tips/1259121/%2FTips%2F1259121%2FAngular-Proxy-Configuration-for-API-Calls

0 голосов
/ 11 января 2019

Причина - HTTP в базовом URL.Когда я обновил свой базовый URL-адрес до HTTPS, он начал работать.

0 голосов
/ 19 декабря 2018

Однажды у меня возникла проблема, когда у меня были контроллеры в том же каталоге, что и мой виртуальный маршрут API.Похоже, что может быть такой же проблемой для вас.У вас есть:

namespace API.Controllers
{
  [Authorize]
  [Produces("application/json")]
  [Route("api/[controller]")]
  public class UsersController : BaseController
{

Теперь я предполагаю (из вашего пространства имен), что каталог, в котором находится ваш контроллер: api/{controllerName}.

Тогда ваш маршрут API: api/[controller].Это означает, что теперь вы можете располагать действительным каталогом и виртуальным каталогом на одном маршруте.Когда вы пытаетесь получить доступ к вашему API, dotnet не понимает, пытаетесь ли вы получить доступ к файлам каталога или к маршруту API.В некоторых случаях это возвращает ошибку 401, другие (в зависимости от браузера) ничего не возвращают.

Вы можете довольно легко проверить эту теорию, временно изменив свой маршрут API на что-то вроде test/[controller], а затем попробуйтеи нажмите его.

Если это разрешит проблему, у вас есть 2 варианта:

  1. Изменить ваш маршрут API.
  2. Изменить каталог контроллера.
...