c# - Angular 7 到 dotnetcore 2.1 Web api 调用没有响应
问题描述
下面是来自 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;
});
}
}
下面是来自角度服务的代码,
login(email: string, password: string) {
return this.http.post<User>(this.baseUrl + "Authenticate", { email,
password }, httpOptions);
}
下面是 dotnetcore 2.1 web api 操作的代码,
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的帖子请求。不知道有什么问题有什么帮助吗?
以下来自startup.cs。我的 dotnetcore2.1 WEB API 解决方案的 CORS 设置是否有任何缺陷
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 启用它们。
从您发布的图像的外观来看,您的 Web API 的 URL 将是http://localhost:44389
,但引用者是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
推荐阅读
- java - 503 上游连接错误或在标头之前断开/重置。当多个 pod 启动时
- jquery - 如何在ajax调用中准备好数据之前显示模态?
- jira - 为什么每次我在 Jira 中创建问题时,都会触发解决方案输入?
- python - Pandad 中的 Groupby 数据来标记我的饼图
- php - 我正在尝试创建一个 PHP 在线直接消息传递系统。我不知道如何在他们发送消息而不刷新页面时显示响应
- wordpress - Woocommerce - 如何在自定义页面上显示当前用户的订单?
- rust - 难以在 Rust 中创建模拟“接收器”以用于测试目的
- python - 用 ayncio.run 替换 asyncio.get_event_loop().run_until_complete
- google-apps-script - 我如何使用 Google App Script 中的 'Trash' 将文件替换为另一个文件(如果它们的名称相同)?
- federated-learning - NameError:名称'RemoteDataset'未在pysyft中定义