没有访问控制允许 Origin IIS

Question

我已经关注 Angular 7 的 this tutorial 来制作 CRUD 函数。我将项目发布到我的IIS，但我有一个error (Image)

从源“http://localhost:4200”访问“http://192.168.120.178:2030/Api/Employee/UpdateEmployeeDetails/”处的 XMLHttpRequest 已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。

我尝试在Update Code 中添加标题以允许 CORS，但它是相同的。

该错误也适用于其他功能（保存、删除）

角度代码

updateEmployee(employee: Employee): Observable<Employee> {
const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json',
    'Access-Control-Allow-Credentials': "true",
    'Access-Control-Allow-Headers': 'Content-Type',
    'Access-Control-Allow-Methods': 'GET',
    'Access-Control-Allow-Origin': '*'
  })
};
return this.http.put<Employee>(this.url + '/UpdateEmployeeDetails/',
  employee, httpOptions);
}

API 代码

   [HttpPut]
        [Route("UpdateEmployeeDetails")]
        public IHttpActionResult PutEmaployeeMaster(EmployeeDetail employee)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            try
            {
                EmployeeDetail objEmp = new EmployeeDetail();
                objEmp = objEntity.EmployeeDetails.Find(employee.EmpId);
                if (objEmp != null)
                {
                    objEmp.EmpName = employee.EmpName;
                    objEmp.Address = employee.Address;
                    objEmp.EmailId = employee.EmailId;
                    objEmp.DateOfBirth = employee.DateOfBirth;
                    objEmp.Gender = employee.Gender;
                    objEmp.PinCode = employee.PinCode;

                }
                int i = this.objEntity.SaveChanges();

            }
            catch (Exception)
            {
                throw;
            }
            return Ok(employee);
        }

但如果我使用 localhost API 运行我的项目，那没关系。但是在发布（IIS）中，我得到了 CORS 错误。我已经花了一整天，但不幸的是我没有找到解决问题的方法。

Answer 1

TL;DR: 实际上，您的 CORS 标头方向错误。

API（服务器端）需要返回 CORS 标头，作为向浏览器发出信号的一种方式，即您希望在（客户端）提供 Angular UI 的任何域都可以调用您的 API。

See this article from Mozilla about CORS

如果您考虑一下，客户端/浏览器设置这些 CORS 标头是没有意义的，因为客户端很容易被不良行为者（例如 chrome 插件、外国 javascript 等）破坏。 )，如果客户端负责这些 CORS 标头，那么让它们成为黑客想要的样子真的很容易。相反，它们需要来自服务器端 - 由 Access-Control-* 前缀暗示。这是服务器将它期望前端访问它的域列入白名单的方式。

另一种思考方式是，如果他们将 CORS 标头限制为仅允许 *.facebook.com，我无法创建一个直接访问 Facebook API 的网站，因为我不拥有该域。 CORS 也是一个保护层，可防止不良行为者使用您的服务器端 API 并欺骗您的前端来捕获人们的数据。

Answer 2

如果是 .net 核心，则进入 Startup.cs 并使用 https 为后端和前端提供服务并启用 CORS

public void ConfigureServices(IServiceCollection services)
{
...
      services.AddCors();
...
}


   public void Configure(IApplicationBuilder app)
   {
    ...
      app.UseCors(builder =>
            builder.WithOrigins("YOUR_FRONTEND_URL")
                   .AllowAnyHeader()
                   .AllowAnyMethod()
                   .AllowCredentials());
    ...
    }

Source

Web API 2（之前的核心）

Install-Package Microsoft.AspNet.WebApi.Cors

App_Start\WebApiConfig.cs

public static void Register(HttpConfiguration config)

{

            var cors = new EnableCorsAttribute(

                origins: "YOUR_FRONTEND_URL",

                headers: "*",

                methods: "*");

            config.EnableCors(cors);
            ...
}

More Information