Fetch Api - Delete - Response to preflight request doesn't pass access control check

Question

I got many solution no one helped for me. i have followed all the solutions set all required headers. still its showing the below error.

Fetch API cannot load http://localhost:25424/api/Employee/DeleteEmployee/1. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:7777' is therefore not allowed access. The response had HTTP status code 404. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

my fetch request :

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){

    })

I tried set mode : no-cors also.

My web api code :

 [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();
        }
    }

I have set CORS in WebApiConfig.cs also

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

Thanks in advance.

Can you do a normal request to http://localhost:25424/api/Employee/DeleteEmployee/ via the browser ... maybe firefox , and once you get a response, Open dev console network panel, do edit and resend Add Origin:http://localhost and post the new response headers here? Also, you Should Not add any access-control headers in the fetch request. These headers are supposed to be response headers — Schrodinger's cat
This happens when appropriate response headers are Not found by fetch. Looking at your response headers is the only way you can troubleshoot it. Opaque responses IMO won't give you anything to work with. — Schrodinger's cat

Schrodinger's cat Schrodinger's cat · Accepted Answer · 2017-08-04T09:47:37

Appropriate Access Control Headers Absolutely Need to be set via

http://localhost:25424/api/Employee/DeleteEmployee/, to enable http://localhost:7777 make a permitted delete

Check on a browser's Network Panel, by doing a normal request
Open up the network request in question - Do edit and resend(assuming firefox)
Add request header Origin:http://localhost and resend the request

Post the response headers.

Further,

Choose a different User to delete when you resend the requests, or may be a different method than a delete for troubleshooting before a solution

Note Make sure you are requesting for something that doesn't give you a 404

When you look at the response headers , If you Do not see Access-control-allow-origin allowing localhost:7777, Or,

Access-control-allow-methods allowing delete, your request is bound to fail.

In which case, maybe you have not configured your API at port 25424 correctly yet, to send these responses

Fetch Api - Delete - Response to preflight request doesn't pass access control check

2 Answers