问题描述
下面是login.component.ts的代码，
below is the code from 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 service的代码，
below is the code from angular service,
login(email: string, password: string) {
return this.http.post<User>(this.baseUrl + "Authenticate", { email,
password }, httpOptions);
}
以下是 dotnetcore 2.1 web api action 的代码，
below is the code for dotnetcore 2.1 web api action,
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;
}
}
}
}
在 fiddler 中，我总是可以看到长度为 -1 的帖子请求.不确定是什么问题有什么帮助吗?
In fiddler always I can see my post request with length as -1. Not sure what is the problem any help?
以下来自startup.cs.我的 dotnetcore2.1 WEB API 解决方案的 CORS 设置是否有任何缺陷
Below are from the startup.cs. Is there any flaw in my CORS Settings for dotnetcore2.1 WEB API solution
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();
}
推荐答案
您应该考虑到您的 WEB API 服务是从不同于 Angular UI 的端口访问的.在开发模式下托管您的 UI 的是 Angular Cli.这意味着为您的 WEB API 启用 CORS 并不一定为 Angular 的 UI 启用它们.
You should take into consideration that your WEB API service is accesed from a different port than the one from your Angular UI. What hosts your UI in development mode is Angular Cli. This means is that enabling CORS for your WEB API doesn't necessarily enable them for Angular's UI.
根据您发布的图片的外观，您的 Web API 的 URL 将是 http://localhost:44389 但referer 是 http://localhost:4200.
By the looks of the image you posted, your Web API's URL would be http://localhost:44389 but the referer is http://localhost:4200.
在开发阶段解决此问题的一种方法是将具有类似于以下配置的 proxyconfig.json 文件添加到您的 ClientApp 根文件夹:
One way to get around this at a development stage, is by adding to your ClientApp root folder a proxyconfig.json file with a similar configuration to:
{
"/api/*": {
"target": "https://localhost:44389",
"secure": true,
"changeOrigin": true
}
}
通过这种方式，浏览器会解释从您的 Angular UI 到您的 WEB API 的请求来自同一来源.
This way the browser interprets that requests from your Angular UI to your WEB API are from the same origin.
如果您的 WEB API 和 Angular UI 将在生产模式下托管在同一台服务器上，我建议您避免使用 CORS.这里有一篇关于这个主题的好文章:https://medium.freecodecamp.org/the-best-ways-to-connect-to-the-server-using-angular-cli-b0c6b699716c
If your WEB API and Angular UI are to be hosted in the same server in production mode I would recommend avoiding CORS. Here's a good article about the subject: 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
Note: you may need to serve the proxyconfig.json file, here's how: https://www.codeproject.com/Tips/1259121/%2FTips%2F1259121%2FAngular-Proxy-Configuration-for-API-Calls
这篇关于Angular 7 到 dotnetcore 2.1 web api 调用没有响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！