While working in your dev env you may find when a some gui client making a call to one of your api server(local/deployed), we may mostly encounter a CORS exception like the below. So what is this and how we could understand this deep and avoid exceptions.
This is only a security feature which every server brings in to combat CSRF attacks by identifying the host making the request to the servers and also filtering specific headers/method allowed in the request to the server by means of the various properties available from the actual client which comes part of the actual
CORS more likely comes into picture if we are not making a simple requests (something more than GET request with additional headers). The client tool used (browser or even postman) triggers a preflight (OPTIONS) request.
This preflight request consists of
Access-Control-Request-* Headers to the other server and the server responds back with
Access-Control-Allow-* Headers and this is cached by the browser to handle the future requests to the servers determined by the response header
This is supported by modern browsers and tools like postman, at the same time some of them provide settings to suppress and other support extensions to override this.
- What is the current origin for this request ❓
- What is the method requested ❓
- What are the non-standard headers set in request, or sometimes they include content-type if that specific media type is not allowed by default ❓
Origin: https://dev-post.hashnode.dev Access-Control-Request-Method: POST Access-Control-Request-Headers: X-PINGOTHER, Content-Type
- 📨 The list of Origins supported or
*to allow all
- 💻 The methods supported by external server
- 💾 The various custom Headers and content-type to be allowed
- ⌛ The value in seconds which can be used to cache the options response, so that not every api calls are triggering preflight requests. However every browser has a max limt which is enforced when this value is more that the max cache time.
Access-Control-Allow-Origin: https://dev-post.hashnode.dev/api Access-Control-Allow-Methods: POST, GET, OPTIONS Access-Control-Allow-Headers: X-PINGOTHER, Content-Type Access-Control-Max-Age: 86400
Browsers can enforce one more security measure on top of this CORS functionality by checking for credentials information in any responses back from the server
Irrespective of the type of request we discussed above, if the response contains the above header value, the browser will not let the response back to the invoking script. So what is this 🔑 Credentials are additional information a fetch or XMLHttpRequest has to specify implicitly to relay the client information like the below.
- 🍪 HTTP cookies
- 🔓 HTTP Authentication information
Thanks for supporting! 🙏
Would be really great if you like to ☕ Buy Me a Coffee, to help boost my efforts.
🔁 Original post at 🔗 Dev Post