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

  1. 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 8080

    Open http://localhost:8080 in the browser instead of the file:// path.

    Node.js-- Use the http-server package:

    npx http-server -p 8080

    PHP-- Use PHP's built-in development server:

    php -S localhost:8080
  2. Update any hardcoded file:// paths in the HTML or JavaScript to use relative paths or http://localhost URLs.

  3. Confirm that the API server accepts requests from http://localhost:8080 (or the port the local server uses) by including it in the Access-Control-Allow-Origin configuration. 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.