Understanding and Resolving CORS Error
What is CORS and CORS preflight?
Cross-Origin Resource Sharing (CORS) is an HTTP-based security mechanism controlled and enforced by the client (web browser) that allows controlled access to resources located outside of a given domain.
Generally, for security reasons, browsers forbid requests that come in from cross-domain sources. However, there could be cases where you want to overcome this and access cross-domain resources, and CORS makes this possible.
There is another concept known as Same-Origin Policy (SOP) which enables resource sharing on similar domains. The Same-Origin Policy was developed as a security mechanism for browsers to protect resources from malicious attacks. SOP allows resource sharing (data exchange) between two objects with the same origins.
CORS preflight: When a browser sends a request to a server, it first sends an HTTP Options request. This is called a CORS preflight request. The server then responds with a list of allowed methods and headers. If the browser is allowed to make the actual request, it sends the actual request. If not, it shows an error and does not continue to send the main request.
How to fix CORS error?
The fundamental idea of fixing CORS is to respond to OPTIONS requests sent from a client with proper headers. There are many ways to start responding with the proper CORS. You can use a proxy server, or you can use middleware in your server
- Configure your server: By default, if you are a server owner, you need to configure CORS responses in your server and this is the only way to address the issue properly. Add this header to your server
'Access-Control-Allow-Origin': '*'as below (simple express framework):
app.use((req, res, next) => {
res.setHeader("Access-Control-Allow-Origin", "*"); // allow all domains
res.setHeader("Access-Control-Allow-Methods", "GET, PUT, DELETE");
res.setHeader("Access-Control-Allow-Headers", "Content-Type");
next();
});
-
Proxy the API Request while using External Calls: You can check here for more info
-
Set up a proxy server: Proxy server is a good solution if you don't have access to the service you intend to use. List of open-source CORS services that you can find on the internet:
-
Use a Serverless Function: Popular serverless functions include AWS Lambda, Azure Functions, and Google Cloud functions. These services allow you to get just enough server space to run a function or two, as you do not need much space to run a function that calls a web service to return some data. See the below AWS Lambda function example
exports.handler = async (event) => {
try{
// some code...
return {
statusCode: 200,
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Headers':
'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token',
'Access-Control-Allow-Methods': 'OPTIONS,POST',
'Access-Control-Allow-Credentials': true,
'Access-Control-Allow-Origin': '*',
'X-Requested-With': '*',
},
body: JSON stringified object,
};
} catch (error) {
console.log(error);
return {
statusCode: 500,
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Headers':
'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token',
'Access-Control-Allow-Methods': 'OPTIONS,POST',
'Access-Control-Allow-Credentials': true,
'Access-Control-Allow-Origin': '*',
'X-Requested-With': '*',
},
body: JSON.stringify({
name: error.name,
code: error.code,
message: error.message,
}),
};
}
};
-
Install a browser extension
-
Disable browser CORS checks: You can disable CORS checks in your browser completely. To disable CORS checks in Google Chrome, you need to start it with the
--disable-web-securityand--user-data-dirflags. By doing that, Google Chrome will not send CORS preflight requests and will not validate CORS headers.
# Windows
chrome.exe --user-data-dir="C://chrome-dev-disabled-security" --disable-web-security --disable-site-isolation-trials
# macOS
open /Applications/Google\ Chrome.app --args --user-data-dir="/var/tmp/chrome-dev-disabled-security" --disable-web-security --disable-site-isolation-trials
# Linux
google-chrome --user-data-dir="~/chrome-dev-disabled-security" --disable-web-security --disable-site-isolation-trials
- Open Run Command (win + R)
- Paste the below command
chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security --disable-site-isolation-trials
- How to test CORS? Using a browser to test your CORS configuration might be a tedious task. You can use a tool like CORS Tester, test-cors.org, or, if you are familiar with the command line, you can use curl to test your CORS configuration.
curl -v -X OPTIONS https://simplelocalize.io/api/v1/translations