Question

我遵循角度7的this tutorial来实现CRUD的功能。我将项目发布到我的IIS中，但是我正在使用error (Image)

CORS策略已阻止从来源“ http://192.168.120.178:2030/Api/Employee/UpdateEmployeeDetails/”访问“ http://localhost:4200”处的XMLHttpRequest：请求的资源上没有“ 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);
        }

但是，如果我使用本地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-*前缀提示。这是服务器将域列入白名单的一种方式，它希望前端可以从中进行访问。

另一种思考方式是，如果我的Facebook的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

没有访问控制允许原始IIS

2 个答案: