CORS: Cross origin requests are only supported for HTTP
Fix the CORS error that occurs when loading files from a file:// URL or non-HTTP scheme by serving them through a local HTTP server instead.
Cross-Origin Resource Sharing (CORS) produces the "Cross origin requests are only supported for HTTP" error when the browser loads a page from a
file://URL or another non-HTTP scheme and attempts a cross-origin request.
When CORS Produces This Error
Cross-Origin Resource Sharing (CORS) produces this error when a developer opens an HTML file directly from the local filesystem (using a
file:// URL) and the page attempts to load resources with the XMLHttpRequest API or the Fetch API. The browser treats
file:// URLs as a special origin that cannot participate in CORS.
CORS also produces this error when the page uses a custom URL scheme such as
data:,
blob:, or a browser extension protocol. These schemes do not support the HTTP-based CORS handshake.
What Causes "Cross Origin Requests Are Only Supported for HTTP" in CORS
Cross-Origin Resource Sharing (CORS) depends on HTTP headers exchanged between the browser and the server. The
file:// protocol does not use an HTTP server, so there is no server to send the
Access-Control-Allow-Origin response header. The browser cannot perform the CORS handshake and blocks the request.
CORS requires an
Origin header in the request. Browsers set the
Origin to
null for requests from
file:// URLs. Most servers reject or ignore requests with a
null origin because allowing it creates a security risk. Any local HTML file on the user's machine could access the API.
How to Fix "Cross Origin Requests Are Only Supported for HTTP" in CORS
Serve the HTML file through a local HTTP server instead of opening it directly from the filesystem. Any HTTP server provides the required HTTP scheme for Cross-Origin Resource Sharing (CORS) to function.
Python-- Start a local HTTP server with Python's built-in module:
python3 -m http.server 8080Open
http://localhost:8080in the browser instead of thefile://path.Node.js-- Use the
http-serverpackage:npx http-server -p 8080PHP-- Use PHP's built-in development server:
php -S localhost:8080Update any hardcoded
file://paths in the HTML or JavaScript to use relative paths orhttp://localhostURLs.Confirm that the API server accepts requests from
http://localhost:8080(or the port the local server uses) by including it in theAccess-Control-Allow-Originconfiguration. See the platform-specific how-to guides for configuration details:
How to Verify the Fix
Open the page through the local HTTP server URL (
http://localhost:8080) and confirm the Cross-Origin Resource Sharing (CORS) error no longer appears in the browser console. Open the Network tab in the browser developer tools and verify the cross-origin request completes with a
200 status.
Edge Cases and Variations
CORS errors from
file:// URLs appear differently across browsers. Chrome displays "Cross origin requests are only supported for HTTP." Firefox displays "CORS request not HTTP." Safari displays "Origin null is not allowed by Access-Control-Allow-Origin." All three errors share the same cause: the page does not use an HTTP scheme.
CORS errors from
file:// URLs may also appear when a build tool or test runner opens HTML files directly. Configure the test runner to use a local HTTP server. Most modern frameworks (React, Vue, Angular) include a development server that handles this automatically.
CORS errors with
null origin can also appear for redirected requests or sandboxed iframes, even on HTTP pages. The browser sets the
Origin to
null after certain redirects. Avoid redirecting cross-origin requests through intermediate URLs when possible.
Related CORS Errors
- CORS: No 'Access-Control-Allow-Origin' header is present on the requested resource-- the server does not return the required CORS header on HTTP requests.
- CORS: Origin is not allowed by Access-Control-Allow-Origin-- the server returns the CORS header but the origin value does not match.