时间戳

首页 > 解决方案 > 没有访问控制允许 Origin IIS

javascript - 没有访问控制允许 Origin IIS

问题描述

我已经按照这个角度 7 的教程来制作一个CRUD函数。我将项目发布到我的项目IIS中，但出现错误（图片）

从源“ http://localhost:4200 ”访问“ http://192.168.120.178:2030/Api/Employee/UpdateEmployeeDetails/ ”的 XMLHttpRequest已被 CORS 策略阻止：否“访问控制允许源”请求的资源上存在标头。

我试图添加标题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 错误。我已经花了一整天，但不幸的是我没有找到解决问题的方法。

标签： javascriptangulariiscors

解决方案

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

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

请参阅 Mozilla 关于 CORS 的这篇文章

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

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

推荐阅读