Ошибка углового внешнего интерфейса при вызове API на серверном C #

Question

У меня есть Angular и AC # webAPI.Внешний интерфейс Angular может извлекать данные из других URL-адресов (например, http://reqres.in/api/users и json-server --watch db.json).WebAPI c # успешно возвращает данные для вызовов API (введенных в браузере и отправленных почтальоном (Get, http://localhost:49566/api/people)). Когда интерфейсный сервер вызывает внутренний сервер), получает следующее: HTTP404: NOT FOUND - сервер необнаружил что-либо, соответствующее запрошенному URI (универсальному идентификатору ресурса). (XHR) ОПЦИИ - http://localhost:49566/people

Есть предложения о том, в чем проблема, или она находится на входном или на заднем плане?

Я рассмотрел несколько примеров Angular httpclient, но продолжаю испытывать то же самое - работает с другими URL-адресами, но не с URL-адресом моего c # webAPI.

Я попытался добавить опцию публикации, ноэто не решило проблему.

C # код:

        public IEnumerable<Person> Get()
        {
            return SQLiteDataAccess.GetPeople();
        }

Код службы передачи угловых данных:

  people: object;

  constructor(private http: HttpClient) { }

    searchClick(searchString: string) {
    return console.log('clicked ' + searchString);
  }

  getPeople() {
    const httpOptions = {
      headers: new HttpHeaders({
          'Access-Control-Allow-Origin': 'http://localhost:4200/',
          'Access-Control-Allow-Methods': 'GET',
          'Access-Control-Allow-Headers': '*',
          'Content-Type': 'application/json',
          'Accept': 'application/json'
      })
    };
    return this.http.get('http://localhost:49566/api/People', httpOptions )  
}
}

Мне нужно, чтобы интерфейс успешно извлек интерфейсданные из серверной части, чтобы я мог их отобразить.

Answer 1

Проблема связана с CORS (на стороне сервера) и сигнатурой метода на стороне сервера.

Прежде всего, включите CORS в своем коде API (C #).Поищите в MSDN соответствующие пространства имен / dll (например, System.Web.Cors).

public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            // Web API configuration and services
            config.EnableCors();

В классе, производном от контроллера API (например), сделайте это, чтобы убедиться, что CORS разрешен.* означает, что все URL разрешены.Изменение в соответствии с потребностями вашего клиента (Angular App URI).

/// <summary>
    /// Provides API for Order entity.
    /// </summary>
    [EnableCors(origins: "*", headers: "*", methods: "*")]
    public class OrderController : ApiController
    {

В CORS отправляется запрос перед полетом с помощью метода OPTIONS, чтобы сервер мог ответить на вопрос, приемлемо ли его отправлятьзапрос с этими параметрами.Отправляется перед отправкой GET или POST.

Возвращаясь к коду API в web.config, убедитесь, что у вас есть следующее:

<system.webServer>
  <handlers>
    <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
    <remove name="OPTIONSVerbHandler" />
    <remove name="TRACEVerbHandler" />
    <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
  </handlers>
</system.webServer>

<remove name="OPTIONSVerbHandler" /> гарантирует, что IIS не перехватывает OPTIONS запросы.

Также в web.config выполните следующее.Это позволяет использовать методы GET, POST и OPTIONS.

<httpProtocol>
      <customHeaders>            
        <!--...omitted for brevity-->

        <add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS" />
      </customHeaders>

Наконец:

[HttpGet]
public IEnumerable<Person> Get()
        {
            return SQLiteDataAccess.GetPeople();
        }

Нет необходимости делать что-либо с CORS в клиентском кодев угловых.Надеюсь, это поможет.

Answer 2

Изменение

   return this.http.get('http://localhost:49566/api/People', httpOptions )

до

   return this.http.get('http://localhost:49566/api/people', httpOptions )

URL-адрес чувствителен к регистру.

Удачи!