CORS Request Not HTTP: Causes and Solutions

What Does "CORS request not HTTP" Mean?

CORS (Cross-Origin Resource Sharing) is a browser security mechanism that controls how JavaScript running on one website can access resources from another. The "CORS request not HTTP" error occurs when a request uses a URL scheme other than HTTP or HTTPS, which violates CORS requirements.

Key point: CORS only works with http:// and https:// URL schemes. Other schemes like file:///, data:, or javascript: will trigger this error.

When working with modern web development frameworks like Next.js, understanding CORS fundamentals is essential for building applications that securely communicate with APIs and external services. Proper web development practices include setting up secure cross-origin policies from the start of your project.

The URL Scheme Requirement

A URL consists of multiple components: scheme://host/path. For CORS to function, the request must use either the HTTP or HTTPS scheme.

Permitted schemes:

• http:// - Standard HTTP protocol
• https:// - Secure HTTP protocol

Blocked schemes:

• file:/// - Local file system paths
• data: - Inline data URIs
• javascript: - JavaScript protocol
• blob: - Blob URLs

This restriction is enforced by all major browsers as a security measure to prevent malicious scripts from accessing local files or resources through non-standard protocols. Following web development best practices ensures your applications implement proper security boundaries from the start.

Why This Restriction Exists

Browsers implement this restriction to protect users from potential security vulnerabilities. Without it, a webpage could potentially:

• Access sensitive files on the user's computer
• Bypass security boundaries
• Execute code from untrusted sources

This security model is fundamental to how browsers protect users and is well-documented in MDN's CORS guide. Understanding these restrictions helps developers build more secure applications that follow browser security best practices.

Common Scenarios That Trigger This Error

1. Opening Files Directly in Browser

The most common cause is opening an HTML file by double-clicking it in your file explorer. The browser loads it via file:/// protocol, and any attempt to fetch local resources triggers the error.

<!-- This fails when opened as file:// -->
<script src="local-script.js"></script>
<link href="local-styles.css">
<img src="local-image.png">

2. Loading Local Resources

Even if your page loads successfully, any fetch() call or XMLHttpRequest to a local file path will fail:

// This will fail with "CORS request not HTTP"
fetch('file:///C:/path/to/data.json')
 .then(response => response.json())
 .catch(error => console.error(error));

3. Modern Browser Security Changes

Historically, browsers allowed local files from the same directory to share resources. However, a security advisory (CVE-2019-11730) changed this behavior. Modern browsers now treat all local files as having opaque (null) origins by default, as explained in MDN's local file loading guide.

This change was implemented across all major browsers to close a security vulnerability that could allow malicious websites to access local files. For development teams, this means adopting proper local server workflows is essential for both security and functionality.

The Solution: Local Development Server

The fix is simple: Always serve your files over HTTP/HTTPS during development instead of using the file:// protocol.

Benefits of Using a Local Server

• Proper CORS handling: Requests use valid HTTP schemes
• Live reload: Automatic page refresh on file changes
• Environment parity: Matches production deployment
• API integration: Proper handling of fetch() and XMLHttpRequest
• Security: Maintains browser security boundaries

Quick Server Setup Options

For teams building modern web applications, using a framework's built-in development server (like Next.js or React) provides additional benefits such as hot module replacement, TypeScript support, and optimized build pipelines. Our web development services can help you set up professional development workflows that avoid these common pitfalls.

Next.js and Modern Framework Solutions

Modern frameworks like Next.js include built-in development servers that handle this automatically:

Next.js Development Server

# Start development server
npm run dev
# or
npx next dev

The Next.js dev server:

• Runs on localhost with proper HTTP protocol
• Handles API routes with correct CORS headers
• Provides hot module replacement
• Supports environment variables for API configuration

API Routes with CORS

// pages/api/data.js
export default function handler(req, res) {
 // Set CORS headers
 res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
 res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
 res.setHeader('Access-Control-Allow-Headers', 'Content-Type');

 // Handle preflight
 if (req.method === 'OPTIONS') {
 return res.status(204).end();
 }

 // Your API logic
 res.status(200).json({ data: 'Hello World' });
}

Next.js provides an excellent foundation for building performant web applications with built-in security features. Our technology expertise covers Next.js implementations and best practices for production deployments.

Best Practices to Avoid CORS Issues

Development Workflow

1. Never open files directly - Always use a development server
2. Use environment variables - Store API URLs in .env.local
3. Configure CORS on backend - Set appropriate headers for allowed origins
4. Use framework proxies - Let your build tool handle cross-origin requests

Backend CORS Configuration

Express.js with CORS middleware:

const cors = require('cors');

const corsOptions = {
 origin: 'http://localhost:3000', // Your development origin
 credentials: true,
 methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
 allowedHeaders: ['Content-Type', 'Authorization']
};

app.use(cors(corsOptions));
app.options('*', cors(corsOptions)); // Handle preflight

Performance Note

Preflight requests add latency to cross-origin requests. Configure Access-Control-Max-Age header to cache preflight results:

res.setHeader('Access-Control-Max-Age', '86400'); // Cache for 24 hours

For comprehensive backend configuration examples, see the SuperTokens CORS configuration guide which covers various server frameworks and their CORS implementations.

Proper CORS configuration is essential for secure API integrations. Our web development services can help you implement robust cross-origin policies that balance security with functionality. Additionally, optimizing your API performance through proper CORS handling contributes to better SEO performance by ensuring fast, reliable resource loading.

Sources

1. MDN: Reason CORS request not HTTP
2. MDN: Cross-Origin Resource Sharing
3. SuperTokens: Fixing CORS Errors