Dynamically generate correct Access-Control-Allow-* headers based on your origin, methods, headers, and credentials. Preview preflight (OPTIONS) requirements and security best practices. For developers, architects, and security engineers.
Use these snippets with the generated headers above. Click any to copy.
// Enable CORS for specific routes
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', 'https://yourdomain.com');
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT');
res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
res.header('Access-Control-Max-Age', '7200');
if (req.method === 'OPTIONS') {
return res.sendStatus(204);
}
next();
});
location /api {
add_header Access-Control-Allow-Origin "https://frontend.com";
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
add_header Access-Control-Allow-Headers "Authorization, Content-Type";
add_header Access-Control-Max-Age 7200;
if ($request_method = OPTIONS) {
return 204;
}
}
Header set Access-Control-Allow-Origin "https://app.example.com"
Header set Access-Control-Allow-Methods "GET, POST, PUT"
Header set Access-Control-Allow-Headers "Content-Type, Authorization"
Header set Access-Control-Max-Age "7200"
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule .* - [R=204,L]
@Configuration
public class CorsConfig {
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("https://frontend.com")
.allowedMethods("GET", "POST", "PUT")
.allowedHeaders("Authorization", "Content-Type")
.maxAge(7200);
}
};
}
}
Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows browsers to request resources from a different origin (protocol+domain+port). It is the cornerstone of modern web security — without CORS, the default same-origin policy would block most cross-origin requests. However, misconfiguration (e.g., overly permissive * or unintended credentials exposure) can lead to serious vulnerabilities like data leakage or CSRF-style attacks.
A typical CORS preflight request/response flow:
OPTIONS /resource HTTP/1.1 Origin: https://client.com Access-Control-Request-Method: PUT Access-Control-Request-Headers: X-Custom HTTP/1.1 204 No Content Access-Control-Allow-Origin: https://client.com Access-Control-Allow-Methods: PUT, POST Access-Control-Allow-Headers: X-Custom Access-Control-Max-Age: 7200
* + credentials).
| Header | Purpose | Typical value |
|---|---|---|
| Access-Control-Allow-Origin | Specifies which origins are permitted. | https://example.com or * |
| Access-Control-Allow-Methods | Lists HTTP methods allowed for cross-origin requests (used in preflight). | GET, POST, PUT |
| Access-Control-Allow-Headers | Indicates which headers can be used in the actual request. | Content-Type, Authorization |
| Access-Control-Allow-Credentials | Whether cookies/authorization credentials are allowed. | true (only if origin is not *) |
| Access-Control-Expose-Headers | Which response headers the browser can expose to frontend JavaScript. | Content-Length, X-Custom |
| Access-Control-Max-Age | How long preflight results can be cached (seconds). | 7200 |
* is convenient, but it cannot be used with credentials and may be too permissive for production. Always restrict to specific origins when possible. Avoid blindly adding * in Access-Control-Allow-Headers (some browsers don't support it).
https://app.example.com, backend API on https://api.example.org
The frontend needs to send requests with an Authorization: Bearer <JWT> header. The CORS configuration would be:
Access-Control-Allow-Origin: https://app.example.com (exact origin, not wildcard)
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: false (since token is in header, not cookies; keeping it false reduces risk)
Access-Control-Expose-Headers: X-Request-ID (if you want the frontend to read a custom correlation ID)
Our generator lets you input these values and instantly produces the exact headers to set in your server (e.g., Express middleware, Nginx add_header).
Not all cross-origin requests trigger a preflight. Simple requests (GET/HEAD/POST with only safe headers) skip it. Preflight is mandatory when:
Content-Type is not one of: application/x-www-form-urlencoded, multipart/form-data, text/plain (e.g., application/json);
include and origin is not *.
*) together with credentials. The origin must be explicit (e.g., https://example.com). The generator will warn you if such a combination is detected.
Allow-Headers tells the server which request headers the client is permitted to send. Expose-Headers tells the browser which response headers it can make accessible to frontend JavaScript (by default only simple response headers are exposed).
*), we recommend adding Vary: Origin to your server configuration to avoid cache issues. The generated headers do not include it automatically, but our production checklist reminds you.