通过CORS策略(Angular,WebApi)已阻止从源“ http:// localhost:4200”访问XMLHttpRequest

时间:2020-08-19 08:27:15

标签: c# angular asp.net-web-api

我猜这个错误在这里是众所周知的... 在当前项目中,我之前曾遇到此错误,当我尝试对其进行修复时,他们说我缺少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", headers: "*", methods: "*", 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();
}

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

1 个答案:

答案 0 :(得分:0)

不确定为什么将其否决,这对我来说似乎是一个非常好的问题,您是正确的,关于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%。祝你好运