通过CORS策略Angular，WebApi已阻止从源“ http：// localhost：4200”访问XMLHttpRequest

如何解决通过CORS策略Angular，WebApi已阻止从源“ http：// localhost：4200”访问XMLHttpRequest

我猜这个错误在这里是众所周知的... 在当前项目中，我之前曾遇到此错误，当我尝试对其进行修复时，他们说我缺少EnableCors的权限，即使它明确表示存在该权限（请参阅项目下面的内容）。最后，问题出在属性的位置，我必须首先放置它，然后是RoutePrefix的属性。而且效果很好。 现在，我执行了另一个功能，一旦我尝试运行它，该错误再次出现。 我已经测试了很多解决这个问题的方法，但是我在这方面还很新，很难理解应该在哪里写什么。 我在想，也许与我编写的新功能有关？它可能有问题。新功能是 GetProductivityRequest 。

这是一个WebApi项目。

那是我的代码：

UserController.cs

using BL;
using DTO;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using System.Web.Http.Cors;

namespace WebApiSystem.Controllers
{
    //at first,the atributs looks like this:
    //[RoutePrefix("api/User")]
    //[EnableCors(origins: "http://localhost:4200",headers: "*",methods: "*",SupportsCredentials = true)]
    //When I changed the position as you can see,the problem was solved.

    [EnableCors(origins: "http://localhost:4200",SupportsCredentials = true)]
    [RoutePrefix("api/User")]

    public class UserController : ApiController
    {

        [HttpGet]
        [Route("login/{email}/{pass}")]

        public IHttpActionResult LogIn(string email,string pass)
        {
            UserDTO user = BL.UserService.LogIn(email,pass);
            if (user != null)
                return Ok(user);
            return NotFound();
        }

        [Route("register")]
        public IHttpActionResult Register(UserDTO user)
        {

            return NotFound();
        }
        [HttpPost]
        [Route("productivity")]

        public IHttpActionResult InsertProductivity([FromBody] ProductivityDTO p)
        {
            bool b = BL.UserService.InsertProductivity(p);
            if (b)
                return Ok(b);
            return BadRequest();
        }

        [HttpGet]
        [Route("getProductivityRequest")]     //This is the function that brought back my problem
        public IHttpActionResult GetProductivityRequest()
        {
            return Ok(UserService.GetProductivityRequest());
        }

    }
}

UserService.cs

using DAL;
using DTO;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace BL
{
    public class UserService
    {
        public static UserDTO LogIn(string email,string pass)
        {
            using (Model2 db = new Model2())
            {
                UserTbl user = db.UserTbl.FirstOrDefault(u => u.UserEmail == email && u.UserPassLogin == pass);
                if (user == null)
                    return null;
                return CONVERTERS.UserConverter.ConvertUsertoDTO(user);
            }
        }

        public static bool InsertProductivity(ProductivityDTO p)
        {
            using (Model2 db = new Model2())
            {                   
                ProductivityTbl prod = BL.CONVERTERS.ProductivityConverter.ProductivityDal(p);
                prod.ProductivityStatus = 1;
                db.ProductivityTbl.Add(prod);
                db.SaveChanges();
                return true;
            }
            return false;
        }

//This is the function that brought back my problem
        public static IQueryable<dynamic> GetProductivityRequest()
        {
            using (Model2 db = new Model2())
            {
                db.Configuration.ProxyCreationEnabled = false;
                db.Configuration.LazyLoadingEnabled = false;
                IQueryable<dynamic> PList = db.ProductivityTbl.Select(p=> new { ProductivityStatus= 1 });
                return PList;
            }
        }
    }
}

Somone告诉我可以在Web api内的Startup类的Configure（）方法中配置行为，但是我不确定这意味着什么...

他叫我写这个：

public static void Configure(IApplicationBuilder app,IWebHostEnvironment env)
{
    if (env.IsDevelopment()) app.UseDeveloperExceptionPage();

    app.UseCors("AllowAll");

    app.UseStaticFiles();
    app.UseRouting();
    app.UseAuthentication();
    app.UseAuthorization();
}

我仍然认为问题可能出在我编写的新功能上。如果您可以看一下，也许我写错了什么，那将对我有很大帮助。 谢谢！

解决方法

不确定为什么将其否决，这对我来说似乎是一个非常好的问题，您是正确的，关于CORS的内容以及其他很多内容。我不是CORS的专家，但是您的浏览器由于怀疑XSS攻击而阻止了您的访问。

要测试您的API是否正常工作，可以使用浏览器插件伪造CORS标头。这是一款适用于Google Chrome浏览器的浏览器 https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=en#:~:text=Allow%20CORS%3A%20Access%2DControl%2DAllow%2DOrigin%20lets%20you,default%20(in%20JavaScript%20APIs)。

可以进行测试，但是对于更永久的修复，您可以告诉.NET Core应用发送正确的标头，以使数据可以被接受。

在启动类的ConfigureServices方法中，定义要应用的CORS策略。像这样...

        services.AddCors(options =>
        {
            options.AddPolicy("AllRequests",builder =>
            {
                builder
                .WithOrigins("http://localhost:4200","https://livesite.com")
                .AllowAnyHeader()
                .AllowAnyMethod()
                .AllowCredentials();
            });
        });

然后在您的Configure方法中，在您的管道中调用

        app.UseCors("AllRequests");

Microsoft的文章（在上面的链接中）对其进行了很好的解释...

所以您在那儿占了50％。祝你好运