VS2017 Web应用程序CORS:访问控制允许来源 [英] VS2017 Web application CORS: Access-Control-Allow-Origin

问题描述

我正在将Angular 6+用于一个向SQL Database呈现CRUD的小型网站.我知道Angular是client-side framework，所以我使用Visual Studio 2017创建了一个Web服务，而我使用的项目是web application ASP.NET Core，并且由于我正在localhost中对其进行测试，因此Angular在，而我的服务目前在port 53819

I'm using Angular 6+ for a small website presenting a CRUD to a SQL Database. I know Angular is a client-side framework so I have created a web service using Visual Studio 2017 the project I used is a web application ASP.NET Core and since I'm testing it in a localhost, Angular runs over 4200 port and my service is currently on port 53819

由于此，我已经(或最后尝试过)通过在我的webservice上安装CORS NUGget软件包并在控制器级别启用它来启用Cross-Origin Resource Sharing (CORS)，如下所示:

Due this, I have (or at last try) enabling Cross-Origin Resource Sharing (CORS) by installing the CORS NUGget Package on my webservice and enabling it at controller level as shown:

...    
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请求，如下所示:

on my Angular App I'm using a simple ajax request as follows:

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

据我所知，我的代码还可以，但是仍然出现错误:

As far as I can get the tutorials my code is OK but still getting the 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:

Even tho the Ajax request has a response 200 OK and the preview shows me the response json:

也许我错过了一些东西，或者我对这个概念的理解不佳...如果需要更多信息来解决我的问题，请随时提出疑问.

Maybe I missed something or I'm not getting the concept well... If need more info to resolve my case feel free to ask.

谢谢.

推荐答案

基于格伦的答案和此"

Based on Glen's answer and this "tutorial" I have managed to get the thing working.

在我的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" };
    }
...

这篇关于VS2017 Web应用程序CORS:访问控制允许来源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！