没有访问控制允许 Origin IIS

Posted 2023-03-04

【中文标题】没有访问控制允许 Origin IIS

【英文标题】：No Access Control Allow Origin IIS

【发布时间】：2019-12-20 14:06:36

【问题描述】：

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

【问题讨论】：

您在请求（Angular）中设置了Access-Control-Allow-* 标头，但它们应该设置为响应（IIS），您需要的可能是like this

@Mendy 我应该在标题名称和值中输入什么？

名称为Access-Control-Allow-Origin、Access-Control-Allow-Methods等...，值为*、GET等...。明白了吗？

@Mendy 我将其添加为说明。现在我遇到了一个新错误。 response to preflight request doesn't pass access control check

XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header的可能重复

【参考方案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 并欺骗您的前端来捕获人们的数据。

【参考方案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

【讨论】：

对不起，我没有使用 .net core。

也添加了 Web API 2 的详细信息。