JavaScript Day 35 — Mastering JavaScript Basics: A Comprehensive Guide for Interview Preparation
100 Days of JavaScript Interview Prep: A Beginner’s Journey
Understanding the CORS POLICY and ERRORS
Welcome to Day 35–100 Days of JavaScript Interview Prep: A Beginner’s Journey with understanding the CORS Errors.
What do you understand by CORS Errors and what kind of errors ?
Answer
CORS (Cross-Origin Resource Sharing) errors occur when a web application hosted on one domain tries to access resources from another domain.
It is common error when we develop and host any application
99.9% developer usually faced these errors when web application hosted on one domain which tries to access resources from another domain.
Even we can easily reproduce it on localhost application.
Example —
When we’re developing locally, we might have different parts of your application running on different ports, like your frontend on one port and your backend on another.
This is a common use -case with every developer.
WHY CORS are Important
- CORS is important because it allows browsers to enforce the same-origin policy(SOP)
- CORS safeguard the integrity of a webpage and privacy of data.
- It save a website from malicious threats.
- It is the HTTP header based mechanism.
It is a security mechanism implemented by web browsers to prevent malicious scripts from making unauthorized requests to other domains.
What is Same-origin policy ?
It is a security mechanism that restricts how a document or script loaded by one origin can interact with a resource from another origin.
Simple words -
The rules is keep your things safe and prevent strangers from messing with your things in your boundaries.
In the world of the internet, websites also have rules like this, called the Same-Origin Policy (SOP).
- It helps keep your browsing experience safe.
- It stops malicious threats from one website from sneaking into other websites.
What are the common errors of CORS ?
Some common causes of CORS errors and how to address them:
Today we will discuss the Missing or Incorrect CORS Headers in detail
Missing or Incorrect CORS Headers:
Errors Examples as below
CORS issues due to missing headers in preflight response
CORS header 'Access-Control-Allow-Origin' missing
“no ‘access-control-allow-origin’ header is
present on the requested resource”
Reason: CORS header 'Access-Control-Allow-Origin' missingROOT Cause Analysis (RCA)
It indicates the server which we are trying to access is missing the necessary CORS headers in its response. It’s not including the Access-Control-Allow-Origin header, which tells the browser which origins are allowed to access the resource.
Solution
Ensure that the server is configured to include the proper CORS headers, such as Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers, etc.
To fix this issue, we will need to update the server configuration to include the Access-Control-Allow-Origin header in its responses.
Examples
How to fix it
- With Express.js Example
// Assuming you're using Express.js for your server
const express = require('express');
const app = express();
// Add CORS middleware
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', '*'); // Allow requests from any origin
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE'); // Allow specific HTTP methods
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization'); // Allow specific headers
next();
});
// Your routes and other middleware
app.get('/example', (req, res) => {
res.send('Hello from example route!');
});
// Start the server
app.listen(3000, () => {
console.log('Server is running on port 3000');
});2. APACHECONF
Example conf file like (httpd.conf and apache.conf), or in an .htaccess file
https://httpd.apache.org/docs/2.4/mod/mod_headers.html#header
Header set Access-Control-Allow-Origin 'https://test.com'3. NGINX
add_header 'Access-Control-Allow-Origin' 'https://test.com' always;
Tomorrow we will learn about CORS Preflight Request Failure
Happy Coding and Stay Tuned :)
Kind is always cool !!!
Share knowledge to gain knowledge !!!!
Be kind and treat people with respect !