Веб-приложение VS2017 CORS: Access-Control-Allow-Origin - PullRequest
Новая
       22

Веб-приложение VS2017 CORS: Access-Control-Allow-Origin

0 голосов
/ 03 июля 2018

Я использую Angular 6+ для небольшого веб-сайта, представляющего CRUD для SQL Database. Я знаю, Angular - это client-side framework, поэтому я создал веб-сервис, используя Visual Studio 2017, проект, который я использовал, - web application ASP.NET Core, и, поскольку я тестирую его в localhost, Angular работает поверх 4200 port и мой сервис в настоящее время на port 53819

В связи с этим у меня есть (или при последней попытке) включить Cross-Origin Resource Sharing (CORS), установив пакет CORS NUGget на свой webservice и включив его на уровне контроллера, как показано: 

...    
namespace CIE_webservice.Controllers
    {
        [Produces("application/json")]
        [Route("api/CIE")]
        [EnableCors(origins: "http://localhost:4200/", headers: "*", methods: "*")]
        public class CIEController : Controller
        {
            [HttpGet]
            public IEnumerable<string> Get()
            {
                return new string[] { "value1", "value2" };
            }
...

на моем Angular App Я использую простой запрос ajax следующим образом: 

$.ajax({
      url: 'http://localhost:53819/api/CIE/',
      success: function() {  console.log(" OK "); },
      error: function() {  console.log(" Error "); }
  });

Насколько я могу получить учебники, мой код в порядке, но все равно выдает ошибку: 

Failed to load http://localhost:53819/api/CIE/: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

Даже если Ajax-запрос имеет ответ 200 OK, и предварительный просмотр показывает мне ответ json:

enter image description here

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

Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 03 июля 2018

На основании ответа Глена и этого " урока " мне удалось заставить это работать.

На моем Startup.cs файле 

...
public void ConfigureServices(IServiceCollection services) {
  services.AddCors();       /* <----- Added this line before de MVC */
  services.AddMvc();
}
...
public void Configure(IApplicationBuilder app, IHostingEnvironment env) {
  if (env.IsDevelopment()) {
    app.UseDeveloperExceptionPage();
  }
  app.UseCors(builder => builder.WithOrigins("http://localhost:4200")); /* <----- Added this line before de MVC */
  app.UseMvc();
}

А в моем контроллере файл CIEController.cs

...    
namespace CIE_webservice.Controllers {
  [Produces("application/json")]
  [Route("api/CIE")]
  [EnableCors(origins: "http://localhost:4200/", headers: "*", methods: "*")] /* <--- This line remains here or can be added at the action level*/
  public class CIEController : Controller {
    [HttpGet]
    public IEnumerable<string> Get() {
      return new string[] { "value1", "value2" };
    }
...
0 голосов
/ 03 июля 2018

У меня похожая работа в хобби-проекте, поэтому я могу показать вам, что я сделал, чтобы это заработало ...

Я сделал это в моем Startup.cs

app.UseCors(options => options.WithOrigins(Configuration["trustedCors"].Split(' ')).AllowAnyMethod().AllowAnyHeader());

с этим в моем конфигурационном файле ...

"trustedCors": "http://localhost:60000 https://localhost:60000 http://glendesktop:60000 https://glendesktop:60000"

Я также помню из моего тестирования, что этот случай важен для CORS.

...