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

【问题标题】：Fetch Api - Delete - Response to preflight request doesn't pass access control checkFetch Api - 删除 - 对预检请求的响应未通过访问控制检查
【发布时间】：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 不会给您任何可处理的东西。

标签： reactjs asp.net-web-api cors fetch-api http-delete

【解决方案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,

【讨论】：