Вкладка сети разработчика Mozilla Подробности вызова метода GET для 5001
Я вынудил проблему, которую не могу решить в течение нескольких часов, это довольно часто, однако ни один из советов, найденных в Интернете, не помог мне.
Тело ответа
Все на моем локальном ПК.
Сначала я разработал несколько простых ASP.NET Core WebAPI на Core 2.1 с использованием кода VS и командной строки.
Этот WebAPI в настоящее время имеет один простой APIController, который размещен по адресу:
https://localhost:5001/api/customers/1
(когда я вставляю его в браузер или почтальона, в результате я получаю несколько простых данных Json с данными одного клиента из базы данных).
Конечно, в классе Startup.cs я добавил:
app.UseCors(options =>
options.WithOrigins("http://localhost:4200/")
.AllowAnyMethod()
.AllowAnyHeader());
и у меня также есть фильтр:
public class AllowCrossSiteJsonAttribute : ActionFilterAttribute
{
public override void OnActionExecuted(HttpActionExecutedContext actionExecutedContext)
{
if (actionExecutedContext.Response != null)
actionExecutedContext.Response.Headers.Add("Access-Control-Allow-Origin", "*");
base.OnActionExecuted(actionExecutedContext);
}
}
Который добавляется в каждый метод внутри контроллера и выше объявления API контроллера.
Весь код контроллера:
namespace BackEnd.Controllers
{
[AllowCrossSiteJson]
[Route("api/[controller]")]
[ApiController]
public class CustomersController : ControllerBase
{
private readonly ICustomersRepository _customersRepository;
public CustomersController(ICustomersRepository customersRepository)
{
_customersRepository = customersRepository;
}
// GET api/customers
[HttpGet]
public async Task<string> Get()
{
var customer = await _customersRepository.GetRandomCustomer();
return customer.FirstName.ToString();
// return new string[] { "value1", "value2" };
}
// GET api/values/5
[AllowCrossSiteJson]
[HttpGet("{id}")]
public async Task<Customer> Get(int id)
{
var customer = await _customersRepository.GetCustomerById(id);
return customer;
}
// POST api/values
[HttpPost]
public async Task Post([FromBody] Customer customer)
{
await _customersRepository.SaveCustomer(customer);
}
// PUT api/values/5
[HttpPut("{id}")]
public void Put(int id, [FromBody] string value)
{
}
// DELETE api/values/5
[HttpDelete("{id}")]
public void Delete(int id)
{
}
}
}
Я использую браузер Google Chrome.
Второе - у меня есть отдельный проект, разработанный с Node.Js в Angular 6.1.1.
Я хотел сделать быстрый тест и вызвать Web API из приложения Angular. Итак, внутри AppComponent я добавил правильную инъекцию httpClient, а внутри метода OnInit добавил запрос http.get так:
this.httpClient.get(`https://localhost:5001/api/customers/${id}`);
Мое приложение Angular изначально является сервером от Node.js по адресу http://localhost:4200
на моем ПК.
(Одновременно на моем ПК работают приложения WebAPI и Angular - две вкладки открываются в одном и том же Google Chrome)
При запуске на http://localhost:4200 и открытии вкладки Google Chrome Developer в консоли возникает ошибка:
Доступ к XMLHttpRequest в «https://localhost:5001/api/customers/1' от источника» http://localhost:4200' заблокирован политикой CORS: в запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin».
В Интернете я обнаружил, что эта проблема возникает из браузера (обычно почтальон может использовать данные из WebAPI)
Я пытался добавить в мой угловой файл proxy.conf.json с содержимым:
{
"/api/*": {
"target": "https://localhost:5001",
"secure": false,
"changeOrigin": true
}
}
Но это мне совсем не помогло.
Понятия не имею, на что посмотреть.
Угловой код:
export class AppComponent {
title = 'FrontEnd';
конструктор (частный apiService: ApiService) {}
ngOnInit () {
console.log('hello');
this.apiService.getCustomerById(1).subscribe((res) => {
console.log(res);
});
}
}
public getCustomerById (id: number) {
return this.httpClient.get(`https://localhost:5001/api/customers/${id}`);
}