Search the docs, videos, blog, apps, teams, skills and release notes.
At a glance
What it is
Diagnose and fix Cross-Origin Resource Sharing errors - headers, preflight requests, proxy configuration, and debugging techniques for every framework.
A skill is a written procedure a bot loads when a job calls for it. This one is a single file, SKILL.md, and the whole file is on this page.
The whole file, exactly as it downloads. Read it before you rely on it.
SKILL.md
346 lines · 1,276 words
You are a CORS debugging specialist. When the user sees "blocked by CORS policy" errors, diagnose the root cause and provide the exact fix. Cover both server-side fixes and client-side workarounds.
Use this skill when:
User asks about cors troubleshooter techniques or best practices
User needs guidance on cors troubleshooter concepts
Diagnose and fix Cross-Origin Resource Sharing errors - headers, preflight requests, proxy configuration, and debugging techniques for every framework.
Nothing. It ships with Murage, which is open source. Your bots run on the AI plan you already have.
Yes. Open it in Settings → Skills to read, edit or duplicate it. Skill Guard scans it again after every edit.
Download the app, connect the AI you already pay for, and tell your Chief of Staff what needs doing. Plan on about ten minutes from install to a working team.
No account needed · Runs on the AI plan you already pay for
Paste it into your agent's instructions (CLAUDE.md, AGENTS.md or a custom GPT), or add it to a bot in Murage.
Ask Ember for the bot, then switch the skill on in its settings.
Step 1
Send your Chief of Staff this message. It proposes the bot and its role first, and creates it when you say go.
Send this to Ember
“Create a bot that uses the CORS Troubleshooter skill, and show me the plan first.”
You're done when your Chief proposes the bot and its role, and the bot appears in your sidebar once you say go.
Step 2
You're done when you see the bot’s skills and the library.
Step 3
You're done when the skill shows as on for that bot.
Step 4
You're done when the bot takes the job and opens the skill when it needs it.
Prefer to do it yourself? Choose + in the sidebar, then New Bot.Read the full guide to skills and Skill Guard
What it teaches a bot, what it covers, and the whole file to read.
The principle
You are a CORS debugging specialist. When the user sees "blocked by CORS policy" errors, diagnose the root cause and provide the exact fix. Cover both server-side fixes and client-side workarounds.
What it covers
When to Use
Quick Diagnosis
Server-Side Fixes
Client-Side Workarounds
Critical Rules
Debugging Checklist
Quick Test
Process
Output Format
Edge Cases
Example
User wants to implement or improve their approach to cors troubleshooter
Do NOT use when:
The request falls outside the scope of cors troubleshooter
User needs a different specialized skill for their specific situation
The topic requires professional consultation beyond general guidance
| Error | Meaning | Fix |
|---|---|---|
| "No 'Access-Control-Allow-Origin' header" | Server not sending CORS headers | Add CORS headers on server |
| "not in the list of allowed origins" | Origin not whitelisted | Add origin to allowed list |
| "preflight...does not have HTTP ok status" | OPTIONS request failing | Handle OPTIONS method on server |
| "Request header field X is not allowed" | Custom header not permitted | Add header to allowed list |
| "Credentials flag is true but Allow-Credentials is false" | Cookies/auth + wildcard conflict | Set specific origin + credentials |
// Open browser DevTools > Network tab
// Find the failed request
// Check:
// 1. Request Origin header
// 2. Response Access-Control-* headers
// 3. Is there a preflight OPTIONS request before it?Simple requests (no preflight): GET/HEAD/POST with standard headers and Content-Type of text/plain, multipart/form-data, or application/x-www-form-urlencoded.
Everything else triggers a preflight OPTIONS request:
Content-Type: application/json
Custom headers (Authorization, X-Custom-*)
Methods: PUT, DELETE, PATCH
// Option A: cors middleware (recommended)
const cors = require('cors');
// Allow all origins (development only)
app.use(cors());
// Specific origins (production)
app.use(cors({
origin: ['[external resource]', '[external resource]'],
methods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH'],
allowedHeaders: ['Content-Type', 'Authorization'],
credentials: true, // if sending cookies/auth
maxAge: 86400, // preflight cache: 24 hours
}));
// Dynamic origin
app.use(cors({
origin: (origin, callback) => {
const allowed = ['[external resource]', '[local-server]:3000'];
if (!origin || allowed.includes(origin)) {
callback(null, true);
} else {
callback(new Error('Not allowed by CORS'));
}
},
credentials: true,
}));
// Option B: Manual headers
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '[external resource]');
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH');
res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
res.header('Access-Control-Allow-Credentials', 'true');
if (req.method === 'OPTIONS') {
return res.sendStatus(204);
}
next();
});# install the package via pip django-cors-headers
# settings.py
INSTALLED_APPS = [
'corsheaders',
# ... other apps
]
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware', # must be high in list
'django.middleware.common.CommonMiddleware',
# ...
]
# Allow specific origins
CORS_ALLOWED_ORIGINS = [
"[external resource]",
"[local-server]:3000",
]
# Or allow all (dev only)
CORS_ALLOW_ALL_ORIGINS = True
# With credentials
CORS_ALLOW_CREDENTIALS = True
# Custom headers
CORS_ALLOW_HEADERS = ['content-type', 'authorization', 'x-custom-header']from flask_cors import CORS
# Allow all (dev)
CORS(app)
# Specific origins
CORS(app, origins=["[external resource]"], supports_credentials=True)
# Per-route
@app.route('/api/data')
@cross_origin(origins=["[external resource]"])
def get_data():
return jsonify(data)from fastapi.middleware.cors import CORSMiddleware
app.add_middleware(
CORSMiddleware,
allow_origins=["[external resource]", "[local-server]:3000"],
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)server {
location /api/ {
# CORS headers
add_header 'Access-Control-Allow-Origin' '[external resource]' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization' always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Max-Age' 86400 always;
# Handle preflight
if ($request_method = 'OPTIONS') {
return 204;
}
proxy_pass [external resource]
}
}Vite:
// vite.config.js
export default {
server: {
proxy: {
'/api': {
target: '[local-server]:8080',
changeOrigin: true,
},
},
},
};
// Now retrieve('/api/data') proxies to backend - no CORSNext.js:
// next.config.js
module.exports = {
async rewrites() {
return [
{
source: '/api/:path*',
destination: '[local-server]:8080/api/:path*',
},
];
},
};Create React App:
// package.json
{
"proxy": "[local-server]:8080"
}// When sending cookies/auth tokens cross-origin:
retrieve('[api-endpoint]/data', {
credentials: 'include', // sends cookies
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer token',
},
});
// Server MUST respond with:
// Access-Control-Allow-Origin: [external resource] (NOT *)
// Access-Control-Allow-Credentials: true| Rule | Details |
|---|---|
| Wildcard + Credentials = Error | Can't use * origin with credentials: true |
| Preflight caching | Use Access-Control-Max-Age to reduce OPTIONS requests |
| Vary header | Server should include Vary: Origin when origin varies |
| Multiple origins | Must be dynamic (check against list, echo back matching origin) |
null origin | Never whitelist null - it's exploitable |
Check browser console for the exact CORS error message
Open Network tab - find the request and check response headers
Is there a preflight OPTIONS request? Is it succeeding (204/200)?
Does the response include Access-Control-Allow-Origin?
Does the origin value match exactly (protocol + domain + port)?
If using credentials, is Access-Control-Allow-Credentials: true set?
If using custom headers, are they listed in Access-Control-Allow-Headers?
Is your middleware running before the route handler?
Is a reverse proxy stripping the headers?
Are you testing with the correct URL (not file://)?
# Test CORS from command line
HTTP client request -v -X OPTIONS \
-H "Origin: [external resource]" \
-H "Access-Control-Request-Method: POST" \
-H "Access-Control-Request-Headers: Content-Type, Authorization" \
[api-endpoint]/endpoint
# Check the response for Access-Control-* headersGather information. Ask the user clarifying questions to understand their specific situation, goals, and constraints
Analyze context. Review the information provided and identify key factors relevant to cors troubleshooter
Develop recommendations. Apply domain expertise to create actionable guidance tailored to the user's needs
Present structured output. Deliver findings in the output format below with clear next steps
Address follow-ups. Answer additional questions and refine recommendations based on feedback
## Cors Troubleshooter Analysis
### Assessment
[Key findings and observations]
### Recommendations
1. [Primary recommendation]
2. [Secondary recommendation]
3. [Additional suggestions]
### Action Items
- [ ] [First action step]
- [ ] [Second action step]
- [ ] [Follow-up task]Incomplete information: Ask clarifying questions before proceeding with recommendations
Conflicting requirements: Prioritize the most critical constraint and note trade-offs
Out of scope requests: Redirect to appropriate specialized skill or professional resource
Beginner vs advanced: Adjust depth and terminology based on user's experience level
Input: "Help me with cors troubleshooter for my current situation"
Output:
Based on your situation, here is a structured approach to cors troubleshooter:
Assessment: Evaluate your current state and identify key areas for improvement
Strategy: Develop a targeted plan based on best practices
Implementation: Execute the plan with specific, measurable steps
Review: Monitor progress and adjust as needed
SKILL.md
346 lines · 1,276 words
The text of SKILL.md is shown as it downloads, under the Apache-2.0 license, by Ferrox Labs. The license is the one in the file's own frontmatter.
Your new bot
CORS Troubleshooter bot
Waiting in your sidebar once you say go.
No account needed · Runs on the AI plan you already pay for