РЕШЕНО Как подключиться к веб-приложению Angular с помощью .Net Core Rest Api? - PullRequest
0 голосов
/ 21 марта 2019

Я пытаюсь запросить мой .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))
  }
}

Странно, что он не будет работать вместе, но он работает отдельно:

Может быть, какая-то полезная информация? Pending requests (keeps pending a long time) Header information Error log Angular httpRequest to ASP Core rest

Как будто мой REST Api все еще блокирует этот Angular http-запрос, что я делаю не так?

Проблема решена: - Использование https вместо http.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...