Как настроить angular 7 для связи с net core web api в VS 2017 - PullRequest
Новая
       15

Как настроить angular 7 для связи с net core web api в VS 2017

0 голосов
/ 08 января 2019

Я искал высоко и низко для хорошего ответа. Проблема, которую я пытаюсь решить, состоит в следующем ... У меня есть проект VS 2017 (Community), в котором есть приложение Angular 7 с бэкэндом web-интерфейса net core в одном проекте. Я могу успешно протестировать API, используя Postman для публикации и получения простых данных в базу данных. Однако, когда я пытаюсь использовать внешний интерфейс Angular, чтобы сделать то же самое, я получаю ошибку ERRCONNREFUSED.

После нескольких противоречивых / разочаровывающих поисков в Интернете, чтобы найти простой ответ, я попробовал файл proxy.config.json.

proxy.config.json 

{
  "/api": {
    "target": "http://localhost:8888",
    "secure": false
  }
}

Я запускаю приложение Angular через npm start, и оно запускается в порту 4200, как и ожидалось.

Я запускаю dotnet run, и он также работает успешно.

Startup.cs 

     app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller}/{action=Index}/{id?}");
        });

        app.UseSpa(spa =>
        {

            spa.Options.SourcePath = "ClientApp";

            if (env.IsDevelopment())
            {
                spa.UseAngularCliServer(npmScript: "start");
            }
        });

package.json 

{  
"name": "client-app",
 "version": "0.0.0",
 "scripts": {
 "ng": "ng",
 "start": "ng serve --proxy-config proxy.config.json",
...}

Я получаю следующую ошибку:

Произошла ошибка при попытке прокси-запроса / API / клиентов с локального хоста: 4200 на локальный хост: 8888 (ERRCONNREFUSED).

Я чувствую, что есть что-то простое, что я просто пропускаю.

Ответы [ 2 ]

0 голосов
/ 09 января 2019

Спасибо всем за быстрый ответ. Я считаю полезным, чтобы другие задавали мне вопросы. В частности, один из IP Kaal относительно настройки CORS. Пытаясь ответить, я обнаружил, что не зарегистрировал CORS в методе Startup ConfigureServices. Как только я это сделал, API работал с интерфейсом Angular, как и ожидалось. Спасибо всем еще раз.

0 голосов
/ 08 января 2019

Proxy.config.json (никогда не видел), похоже, что он предназначен для того, чтобы ваш внутренний сервер nodejs отправлял запросы на другой веб-сервер, поэтому он должен указывать другой сервер. Похоже, вы объявили, что эта служба работает на 8888 на вашем локальном хосте, но, очевидно, это не так.

Модели безопасности сценариев веб-браузера обычно основаны на сценариях клиентской страницы, которые могут взаимодействовать только с сервером, с которого поступила страница. Таким образом, если у вас есть API на http://myapi.myhost.com (в производстве) и ваше угловое приложение настроено на локальном компьютере, то страница, полученная с локального компьютера, может взаимодействовать только с сервером на локальном компьютере. машина, поэтому сервер на localhost: 4200 (вероятно, nodejs) должен перенаправлять запросы на myapi.myhost.com от имени страницы.

В качестве альтернативного (лучшего) варианта вы можете настроить его так, чтобы интерфейс API (другой хост / порт) был доступен из вашего интерфейсного приложения, даже если сервер, на котором размещен API, не обслуживал ваше приложение

Вы говорите, что у вас есть рабочий запрос в почтальоне, предположительно, целью этого запроса является веб-сервер, на котором выполняется API, поэтому настройте прокси-сервер таким образом, чтобы он был целевым, а не локальным: 8888 (это действительно поможет при отладке, если Вы отправляете запросы рабочего почтальона, даже скриншот URL-адреса, который ударил бы почтальон, помог бы)

Если API действительно работает на 8888, и вы хотите решить это через прокси, а не CORS, у нас есть немного больше работы, чтобы выяснить, почему он не подключается

...