Fetch Api - 删除 - 对预检请求的响应未通过访问控制检查

Posted 2023-02-27

【中文标题】Fetch Api - 删除 - 对预检请求的响应未通过访问控制检查

【英文标题】：Fetch Api - Delete - Response to preflight request doesn't pass access control check

【发布时间】：2018-01-12 04:05:37

【问题描述】：

我得到了很多解决方案，没有人帮助我。我已经按照所有解决方案设置了所有必需的标题。仍然显示以下错误。

Fetch API 无法加载 http://localhost:25424/api/Employee/DeleteEmployee/1。回应 预检请求未通过访问控制检查：否 'Access-Control-Allow-Origin' 标头出现在请求的 资源。因此不允许使用原点“http://localhost:7777” 使用权。响应的 HTTP 状态代码为 404。如果响应不透明 满足您的需求，将请求的模式设置为“no-cors”以获取 禁用 CORS 的资源。

我的获取请求：

fetch('http://localhost:25424/api/Employee/DeleteEmployee/' +1, 
    method: "DELETE",       
    headers:     
    'Accept': 'application/json',
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin' : '*' ,
    'Access-Control-Allow-Headers'  : 'Origin, X-Requested-With, Content-Type, Accept',
    'Access-Control-Allow-Methods' : 'DELETE',
     'mode'  : 'cors' 

    , 

    )
    .then(function(resp)

    )

我也试过 set mode : no-cors。

我的网络 api 代码：

 [EnableCors(origins: "*", headers: "*", methods: "*")]
    public class EmployeeController : ApiController
     
        [HttpDelete]
        public IHttpActionResult DeleteEmployee(int id)
        
            using (var ctx = new Employee())
            
                var existingemp = ctx.tempemp.Where(s => s.Id == id).FirstOrDefault();
                ctx.Entry(existingemp).State = System.Data.Entity.EntityState.Deleted;
                ctx.SaveChanges();
            
            return Ok();
        
    

我也在 WebApiConfig.cs 中设置了 CORS

var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors); 

提前致谢。

【问题讨论】：

你能不能通过浏览器向http://localhost:25424/api/Employee/DeleteEmployee/发出正常请求...也许是firefox，一旦你得到响应，打开开发控制台网络面板，做edit and resend添加Origin:http://localhost并发布新的响应头在这里？此外，您不应在 fetch 请求中添加任何 access-control 标头。这些标头应该是响应标头

这种情况发生在当适当的响应标头 未被 fetch 找到时。查看响应标头是解决问题的唯一方法。 不透明响应 IMO 不会给您任何可处理的东西。

【参考方案1】：

适当的访问控制标头绝对需要通过

设置

http://localhost:25424/api/Employee/DeleteEmployee/，启用http://localhost:7777进行允许删除

通过正常请求检查浏览器的网络面板 打开有问题的网络请求 - 执行 edit and resend（假设是 firefox） 添加请求头Origin:http://localhost并重新发送请求

发布响应标头。

进一步，

在重新发送请求时选择要删除的其他用户，或者在解决之前选择与 delete 不同的方法来进行故障排除

注意确保您请求的内容不会给您404

当您查看 response 标头时，如果您没有看到 Access-control-allow-origin 允许 localhost:7777，或者，

Access-control-allow-methods 允许删除，您的请求必然会失败。

在这种情况下，您可能还没有正确配置端口 25424 的 API 来发送这些响应

【参考方案2】：

2 小时后我自己得到了解决方案。 问题是我忘记在我的请求中输入 'id?='。

fetch('http://localhost:25424/api/Employee/DeleteEmployee/' +1,

而不是这个。我在下面使用来解决这个问题。

fetch('http://localhost:25424/api/Employee/DeleteEmployee?id=' +1,