Listen to this Post
CORS (Cross-Origin Resource Sharing) is a security feature in browsers that controls whether a web page on one domain can request resources (APIs, images, fonts) from another domain. Without CORS, browsers block cross-origin requests for security reasons.
Key CORS Headers
- Access-Control-Allow-Origin: Specifies which domains can access the response.
- Access-Control-Allow-Credentials: Indicates if the response can include credentials (like cookies).
- Access-Control-Allow-Headers: Lists which headers can be used in the request.
- Access-Control-Allow-Methods: Lists which HTTP methods (GET, POST, etc.) can be used.
- Access-Control-Expose-Headers: Lists which headers are safe to expose to the browser.
- Access-Control-Request-Headers: Used in preflight requests to list headers that will be used.
- Access-Control-Request-Method: Used in preflight requests to indicate the HTTP method.
Types of CORS Requests
- Simple Requests: Directly sent if they use GET, POST, or HEAD with standard headers.
- Preflight Requests: The browser first sends an OPTIONS request to check if the actual request is allowed (used for PUT, DELETE, or custom headers).
Why CORS Exists
CORS prevents unauthorized cross-origin requests, protecting APIs from unintended access.
Example Scenarios
✅ Allowed Request:
– `frontend.com` makes a request to api.backend.com.
– The server responds with Access-Control-Allow-Origin: frontend.com.
– The browser verifies and grants access.
❌ Blocked Request:
– `frontend.com` makes a request to api.unconfigured.com.
– The server doesn’t include Access-Control-Allow-Origin.
– The browser blocks the request.
You Should Know: How to Fix CORS Issues
1. Backend Configuration
Node.js (Express) Example
[javascript]
const express = require(‘express’);
const cors = require(‘cors’);
const app = express();
// Enable CORS for all routes
app.use(cors());
// Or configure specific origins
app.use(cors({
origin: ‘https://frontend.com’,
methods: [‘GET’, ‘POST’],
allowedHeaders: [‘Content-Type’],
}));
app.get(‘/api/data’, (req, res) => {
res.json({ message: “CORS-enabled response!” });
});
app.listen(3000, () => console.log(‘Server running on port 3000’));
[/javascript]
#### **Python (Flask) Example**
from flask import Flask
from flask_cors import CORS
app = Flask(<strong>name</strong>)
CORS(app) # Enable CORS for all routes
<h1>Or restrict to specific origins</h1>
CORS(app, resources={
r"/api/*": {
"origins": ["https://frontend.com"],
"methods": ["GET", "POST"],
"allow_headers": ["Content-Type"]
}
})
@app.route('/api/data')
def get_data():
return {"message": "CORS-enabled response!"}
if <strong>name</strong> == '<strong>main</strong>':
app.run(port=5000)
### **2. Frontend Workarounds**
#### **Using a Proxy Server**
If the backend doesn’t support CORS, use a proxy like NGINX:
server {
listen 80;
server_name frontend.com;
location /api/ {
proxy_pass http://backend.com/;
add_header 'Access-Control-Allow-Origin' 'frontend.com';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
}
}
#### **Disabling CORS in Development (Chrome)**
Run Chrome with:
google-chrome --disable-web-security --user-data-dir=/tmp/chrome-test
⚠️ **Warning**: Only use this for local testing!
### **3. Testing CORS with cURL**
curl -H "Origin: http://frontend.com" -I http://backend.com/api/data
Check for `Access-Control-Allow-Origin` in the response.
## **What Undercode Say**
CORS is a crucial security mechanism, but misconfigurations can break web apps. Always:
✅ Configure CORS properly in the backend.
✅ Avoid disabling security in production.
✅ Use proxies if backend modifications aren’t possible.
### **Additional Linux & Windows Commands for Debugging**
#### **Linux (Check HTTP Headers)**
curl -I https://api.example.com
#### **Windows (PowerShell)**
Invoke-WebRequest -Uri "https://api.example.com" -Method Options
#### **Blocking Suspicious Domains via Hosts File**
echo "0.0.0.0 malicious.com" | sudo tee -a /etc/hosts
## **Expected Output:**
A properly configured CORS setup allows secure cross-origin requests while blocking unauthorized access. Always test with `curl` or browser DevTools before deployment.
For further reading:
References:
Reported By: Akashsinnghh Cors – Hackers Feeds
Extra Hub: Undercode MoN
Basic Verification: Pass ✅
