Я пытаюсь запросить мой .Net Core REST Api в веб-приложении Angular.
Я читал кое-что о включении CORS, поэтому я сделал это :
REST - Startup.cs
public class Startup
{
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}
public IConfiguration Configuration { get; }
public void ConfigureServices(IServiceCollection services)
{
services.AddMvc();
services.AddCors();
services.AddCors(options => {
options.AddPolicy("CorsPolicy",
builder => builder.AllowAnyOrigin()
.AllowAnyMethod()
.AllowAnyHeader()
.AllowCredentials());
});
}
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseMvc();
app.UseCors("CorsPolicy");
app.UseCorsMiddleware();
}
}
REST - CorsMiddleware.cs
public class CorsMiddleware
{
private readonly RequestDelegate _next;
public CorsMiddleware(RequestDelegate next)
{
_next = next;
}
public Task Invoke(HttpContext httpContext)
{
httpContext.Response.Headers.Add("Access-Control-Allow-Origin", "*");
httpContext.Response.Headers.Add("Access-Control-Allow-Credentials", "true");
httpContext.Response.Headers.Add("Access-Control-Allow-Headers", "Content-Type, Accept");
httpContext.Response.Headers.Add("Access-Control-Allow-Methods", "POST,GET,PUT,PATCH,DELETE,OPTIONS");
return _next(httpContext);
}
}
public static class CorsMiddlewareExtensions {
public static IApplicationBuilder UseCorsMiddleware(this IApplicationBuilder builder)
{
return builder.UseMiddleware<CorsMiddleware>();
}
}
в app.module.ts Я импортировал HttpClientModule из '@ angular / common / http'
Угловой - сервис.ц
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class MapService {
constructor(private hclient: HttpClient) { }
create():Observable<string>{
return this.hclient.get<string>("http://localhost:44300/api/values/1");
}
}
Угловой - component.ts
import { Component, OnInit } from '@angular/core';
import { MapService } from '../map.service';
@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
constructor(private serv: MapService) { }
ngOnInit() { }
onSubmit(){
console.log("submit map component")
this.serv.create().subscribe(res => console.log(res))
}
}
Странно, что он не будет работать вместе, но он работает отдельно:
Может быть, какая-то полезная информация?
Как будто мой REST Api все еще блокирует этот Angular http-запрос, что я делаю не так?
Проблема решена:
- Использование https вместо http.