CORS — Error or Security Warning
--
Have you ever encountered this type of Error?
If you could, then it failed to generate response and CORS policy block to access the request.
-But first, let’s find out WHAT CORS IS,
CORS stands for CROSS-ORIGIN RESOURCE SHARING and it allows you to exchange resources from other URLs in your website. CORS is a mechanism which tells the browser which it’s allowed to make the request or when it’s is not of the same origin.
Let’s make it easy to understandable, consider there is your website (http://www.iparagsaxena.in) and you tried to call an API from that particular URL, these both(webpage and API) are of different origin, and this is treated as cross-origin site request and whenever we tried to make cross-site request, the API server has to include a header when it sends a request back to the server. So, when we call any REST API, then the server response back with header file and body.
If the server does not respond with specific headers to a “simple” GET or POST request — it will still be sent, the data still received but the browser will not allow JavaScript to access the response.
If your browser tries to make a “non-simple” request (e.g., a request that includes cookies, or which Content-type is other than application/x-ww-form-urlencoded, multipart/form-data or text-plain) a mechanism called preflight will be used and an OPTIONS request will be sent to the server.
CORS HEADERS
CORS uses a few HTTP headers — both in request and response — but the ones you must understand in order to be able to continue working are:
1. Access-Control-Allow-Origin
This header is meant to be returned by the server and indicate what client-domains can access its resources. The value can be:
🚀 “ * ”— allow any domain
🚀 A fully qualified domain name (e.g., www.iparagsaxena.in)
If you require the client to pass authentication headers (e.g., cookies) the value cannot be * — it must be a fully qualified domain!
2. Access-Control-Allow-Credentials
This header is only required to be present in the response if your server supports authentication via cookies. The only valid value for this case is true.
3. Access-Control-Allow-Headers
Provides a comma-separated list of request header values the server is willing to support. If you use custom headers (e.g. x-authentication-token you need to return it in this ACA header response to OPTIONS call, otherwise the request will be blocked.
4. Origin
This header is part of the request that the client is making and will contain the domain from which the application is started. For security reasons browsers will not allow you to overwrite this value.
What Actually Happened?
Instead of calling direct the API Server, we call the middleware server by adding the middleware server to a prefix of API webpage and that server allows us to the access control header and response back to the browser.
The drawback of using the third-party server is the Response time, bypassing thought multiple URLs, the response time would be increased.
Configuring CORS correctly once can remove it for all the given application. The importance of CORS implementation comes with security aspects. It blocks the calls made by unknown domains and keeps the paths open only to the known domains. So, the attacking of unauthorized requests blocks and security is ensured. Currently, browsers are integrated and extend the CORS support, and also most of the programming languages, frameworks implement CORS restriction thought out by code.
SO, HOW TO FIX ‘CORS’ ERROR?
At that so far, we see CORS is not an error or vulnerability, it’s a mechanism which prevents the unauthorized access of HTTP request has made from domain A to B.
So, to allow the CORS to domain A to access other sites or a specific domain B, there are two methods from which we can allow the access
1. Modify the request made to the server with additional headers.
2. Configure the server to accept requests by the specified domain or all domains. (Usually done by adding the header information ‘Access-Control-Allow-Origin = “*”’ in the server side.)
CORS EVERYWHERE
It is a third-party service to access the Cross-site origin and which automatically includes header when we call rest API.
The Advantages of using Third Party API is,
🚀 It’s More Secure to use.
🚀 The Scope is applied only to a webpage instead of globally.
HOW TO USE?
Simply append this URL https://cors-anywhere.herokuapp.com/ to the suffix of desired API URL, which allows us to access the API Server with access-control-allow-origin.
Thanks for reading the blog on CORS, hope you like it Please leave a like if you do and for further questions, comment down below :)
