CODEWITHSUNDEEP
reactjsasp.net-web-apicorsfetch-apihttp-delete
Karthikeyan
Karthikeyan

Reputation: 173

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

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.

Upvotes: 1

Views: 2951

Answers (2)

Karthikeyan
Karthikeyan

Reputation: 173

I got solution myself after 2 hours. The issue is i forgot to put 'id?=' in my request.

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

Instead of this . I Used below to solve ths issue. 

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

Upvotes: -1

Schrodinger's cat
Schrodinger's cat

Reputation: 1102

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

Upvotes: 1

Related Questions