Как отобразить текст, полученный из веб-api в angular 2

У меня есть Asp.Net метод Core web api, возвращающий строку.

   [Route("GetString")]
        public string GetString()
        {
            return "String from <b> Web </b> API";
        }

URL-адрес отлично работает в браузере, однако, когда я запускаю его из приложения angular 2

getDialog(){  
      this.result = this.http.get(this._stringUrl1).forEach((response) => response.text); 
      console.log(this.result); 
}

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

XMLHttpRequest cannot load http://localhost:49596/Content/GetString. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

Я получаю тот же ответ, если вызываю метод web api, который возвращает HttpResponseMessage.

 [Route("GetHttpResponseMessage")]
        public HttpResponseMessage GetString2()
        {
            var response = new HttpResponseMessage();
            response.Content = new StringContent("HttpResponseMessage from Web API 2", Encoding.UTF8, "Text/txt");
            return response;

        }

Это мой первый угловой приложение, так что я не уверен, если мой angular2 код является правильным или нет. Любая помощь ценится.

2 ответа

  1. Это обычно происходит, когда клиент и сервер не работают в одном домене.

    Вы можете сделать это включить CORS на вашем сервере API, так как вы используете C# Вы делаете это внутри вашего интернета.config только для разработки . Где 3000 порт клиента

    <customHeaders>
    <add name="Access-Control-Allow-Origin" value="http://localhost:3000" />
    </customHeaders>

    Или есть плагин google chrome, который позволяет это, а также. https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related?hl=en

    Вы можете легко включать и выключать его на досуге. Есть другие методы, а также в изменении заголовка запроса и т.д…

    Они просто проще.

  2. в asp.net web api (4.5), я узнал, что вы должны добавить разрешение в двух местах:
    1) при запуске (webapiconfig.цезий)

    var cors = new EnableCorsAttribute(
                    origins: "*",
                    headers: "*",
                    methods: "*");
    config.EnableCors(cors);    
    

    2) на уровне контроллера (pocoController.цезий)

    namespace BiGPOCO.API.Controllers
    {
        [EnableCors(origins: "http://localhost:3000", headers: "*", methods: "*")]
        public class PocoController : ApiController
        {}
    }