Showing posts with label CORS (Cross Origin Resource Sharing). Show all posts
Showing posts with label CORS (Cross Origin Resource Sharing). Show all posts

Friday, December 27, 2019

How to solve the Preflight CORS error "The requested resource does not support http method 'OPTIONS'"

In this article we review how to solve the Preflight CORS error "The requested resource does not support http method 'OPTIONS'" : 405 method not allowed :




For several CORS requests, the browser sends a previous request, named "preflight request", before it sends the actual request for the resource.
It is not enought to use the standard CORS (Cross Origin Resource Sharing) on web.config , in order to solve the problem.
Here you can see the web.config settings, usually arranged to solve the problem :







How to solve the Preflight CORS error "The requested resource does not support http method 'OPTIONS'" using WebApi and Angular7



The issue appears while crossing domains, and relates to POST, PUT, PATCH, and DELETE methods:
here you can see several requests , also from the Angular 7 app, as from POSTMAN :








As said, it is not enought to set the web.config to CORS.
Now,  usually the browser sends a previous request to the request that you are sending, named "preflight request", before it sends the actual request for the resource. This Preflight request is of OPTIONS type.
If the response headers do not allow the required HTTP METHOD, the browser do not send it.

The problem is, the WebApi app has not an action to process the Preflight OPTIONS request :



That is what the error is trying to say us.

So, just write an action for OPTIONS verb, that only responds an "OK", as this :



Now try again. Send a request. The breakpoint will show the OPTIONS request being processed :



Immediately after, the intended request is taken care of:





That solves this issue.
Have a good day :-)

Enjoy Angular.....

      by Carmel Schvartzman

כתב: כרמל שוורצמן

Thursday, June 11, 2015

How to fix the CORS Error 'Method DELETE is not allowed by Access-Control-Allow-Methods'

In this post we describe Step by step how to fix the CORS Error 'Method DELETE is not allowed by Access-Control-Allow-Methods'.  
This HTTP Error is sent back in the response by a web service following to an HTTP Ajax Request. This is a CORS (Cross Origin Resource Sharing) error, because it's originated by the different domains of the web Referer (the Requesting URL) and the Web Service (the Requested URL).
Frequently this error looks like this:
How to fix the CORS Error 'Method DELETE is not allowed by Access-Control-Allow-Methods'



Step by step how to fix the CORS Error 'Method DELETE is not allowed by Access-Control-Allow-Methods'



The internet web tool that we're using in this tutorial is the Chrome's Developer Tool (F12).
Normally, in the case of an status 200 (OK) response, we would have the following HTTP Headers at the "Network" tab, meaning that the HTTP request has been accepted:
How to fix the CORS Error 'Method DELETE is not allowed by Access-Control-Allow-Methods'    1


As you notice , both URLs ( requested- requesting URLs) belong to the same Domain ("http://localhost:XXXX/"):
How to fix the CORS Error 'Method DELETE is not allowed by Access-Control-Allow-Methods'   2


No problem here.

However, in our case, we probably got some Error like the following:
How to fix the CORS Error 'Method DELETE is not allowed by Access-Control-Allow-Methods'     3



If you open the Headers tab, and take a look at the URLs of both Referer and web service, you'll notice the following:
How to fix the CORS Error 'Method DELETE is not allowed by Access-Control-Allow-Methods'    4




You can note that they are different domains: we have a CORS (Cross Origin Resources Sharing) problem here. The browser has sent an HTTP OPTIONS request to the service, asking it whether it will accept an HTTP DELETE request, by using the Access-Control-Request-Method header.
Now here at the Response Headers, we see that the Access-Control-Request-Method header do not include the HTTP DELETE method, which is therefore not allowed:
How to fix the CORS Error 'Method DELETE is not allowed by Access-Control-Allow-Methods'   5




Usually, CORS problems are issued because the Access-Control-Request-Origin do not accept Ajax requests from Domains other than its own domain.
Here the CORS problem is about the HTTP Method being used.
To fix it, you must be allowed access to the Web Service's  web.config file , where the "httpProtocols" are located:
How to fix the CORS Error 'Method DELETE is not allowed by Access-Control-Allow-Methods'     6




Once there, first check that the allowed origins are all domains ( "*" ).
Next, add to the Access-Control-Request-Method the one you need: HTTP DELETE in our case:

Step by step how to fix the Error 'Method DELETE is not allowed by Access-Control-Allow-Methods'     7

Save the web.config file, and send the Request again:
How to fix the CORS Error 'Method DELETE is not allowed by Access-Control-Allow-Methods'    8



This time, the HTTP OPTIONS returns an status 200 (OK), informing to your browser  that the "DELETE" request is indeed allowed:
How to fix the CORS Error 'Method DELETE is not allowed by Access-Control-Allow-Methods'      9




Now is up to the browser to send the HTTP DELETE request, and this time, the response get status 200 (OK) :
How to fix the CORS Error 'Method DELETE is not allowed by Access-Control-Allow-Methods'     11





We hope that this post has helped you ..

Happy programming.....

      by Carmel Schvartzman


כתב: כרמל שוורצמן