Запросы к .NET Core Web API из приложения Angular (HttpClient) не выполняются с помощью отладчика VSCode для расширения Chrome

У меня есть конфигурация launch.json со следующим:

{
  "type": "chrome",
  "request": "launch",
  "name": "Launch Chrome against localhost",
  "url": "http://localhost:4200",
  "webRoot": "${workspaceFolder}"
}

Всякий раз, когда я пытаюсь сделать запрос GET к своему веб-API ASP.NET Core, я получаю Не удалось загрузить ресурс: net :: ERR_CERT_AUTHORITY_INVALID.

Всякий раз, когда я пытаюсь выполнить запрос POST, он терпит неудачу во время предварительного запроса OPTIONS. ВАРИАНТЫ https: // localhost: 5001 / api / products /

Есть идеи, почему это происходит только при запуске приложения Angular через отладчик для Chrome с использованием вышеуказанных настроек? Если я запускаю сайт обычно с помощью ng, все вызовы api с использованием клиента Angular Http работают нормально.

Вот как я делаю запрос в своей службе Angular:

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

  insertProduct(product: Product) {
    return this.http.post(this.productsUrl, product, httpOptions);
  }

Я считаю, что проблема связана со следующей строкой в ​​моем Web API Startup.cs:

app.UseHttpsRedirection();

Есть ли способ сообщить приложению angular при запуске отладчика chrome работать по ssl с действующим сертификатом?

Что такое тип проекта? Это шаблон Angular Core или вы разрабатываете Angular и веб-api отдельно? Какой у вас Startup.cs? Могли бы вы после запуска проекта получить доступ к https://localhost:5001/api/products/ из веб-браузера? Есть ли какой-нибудь репродуктивный проект?

Edward 09.08.2018 07:21

@edward Веб-api - это веб-API app.net core 2.1. Приложение angular - это автономное приложение Angular, созданное с помощью ng new, а не dotnet new. Когда я запускаю проект веб-API, я могу успешно вызывать его следующими способами: Postman и ng serve (приложение Angular работает нормально). Допустим, я хочу отлаживать приложение Angular с помощью отладчика Chrome в vscode. Когда я запускаю это, ни один из вызовов API не работает. Я пробовал и https, и http.

Blake Rivell 09.08.2018 13:45

Какой у вас Startup.cs в веб-API? Вы настроили Включение запросов между источниками (CORS) в ASP.NET Core в веб-API?

Edward 09.08.2018 14:28

@Edward Да, я настроил Cors, чтобы разрешить все. Похоже, моя проблема заключается в следующем параметре в моем ASP.NET Core Web API Startup.cs: app.UseHttpsRedirection () ;. Я предполагаю, что при запуске Angular через отладчик Chrome он загружается по адресу http: // localhost / 4200, вероятно, без действительного сертификата. Странно, что при запуске ng serve работает. Возможно, что-то кешируется или хранится в браузере, что не сохраняется при запуске отладчика Chrome. Поскольку отладчик Chrome открывает окно почти так, как будто это вкладка инкогнито.

Blake Rivell 09.08.2018 14:30

@Edward В качестве временного решения я закомментировал app.UseHttpsRedirection (); в моем методе настройки Startup.cs. Это делает так, что вызовы http: // localhost: 5000 работают без перенаправления на https. В приложении angular мне просто пришлось изменить URL-адрес api на http: // localhost: 5000 / api / products. Несмотря на то, что это работает, было бы неплохо когда-нибудь выяснить, как использовать https с веб-api и по-прежнему вызывать его через приложение Angular, не отказывая мне.

Blake Rivell 09.08.2018 14:32
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
5
1 364
0

Другие вопросы по теме