Solution to Chrome Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Posted on by Ahmed Amayem

If you are running a page directly from Chrome (you just double clicked on an html file) and you’re javascript is trying to request some data you will hit an error that looks something like the following:

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

You can see the error in the console of your browser. To view the console check How to Open/Activate Web Developer Tools on Chrome, Firefox and Safari Browsers

The Reason

You are not opening the page through a server, like Apache or nginx, so when the browser tries to obtain the resource it thinks it is from a separate domain, which is not allowed.

The Solution

Run a Server on your Machine

Open your page through a web server like Apache, nginx, node etc.

Use a Different Browser

I did not find this error when directly opening the page using Firefox and Safari.

Contributions

  1. Krill Fuchs‘s answer to this Stackoverflow Question

  38 people found this article useful

Ahmed Amayem has written 90 articles

A Web Application Developer Entrepreneur.

  • Tim Randall

    Latest stable version of each browser, and Linux Mint.
    I have tried both the NPM server and Python’s simple server. Everything is fine in Firefox, but Chrome gives the cross origin error.
    Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
    Trying to learn three.js want to develop locally. Working a 2013 tutorial from Treehouse. They haven’t been any help yet. I think the loader.load line is the source of the problem
    Example js code :
    var loader = new THREE.JSONLoader();
    loader.load( “js/logo.js”, function(geometry)

    There is a demo for the tutorial that works fine in Chrome, using this code:
    var loader = new THREE.JSONLoader();
    loader.load( ‘http://codepen.io/nickpettit/pen/nqyaK.js’, function(geometry)

    Have tried loader.load( “http://localhost:8000/js/logo.js” – no good.

    Every on-line source just tells me to run a localhost, my terminal shows the local server is running when I use Firefox on this but no activity when I try to load localhost:8080 in Chrome.
    Any help would be appreciated.
    I would like to locally develop code that works without forcing end user to change settings in current releases of Chrome, Firefox, Safari, and, dare I hope, Edge.

    • http://ahmed.amayem.com ahmedamayem

      I’m not sure what the problem would be if you are running a server. Have you had any luck?

  • confused

    would this problem get fixed after uploading files to hosting site? or would this problem always emerge when using chrome? is there a code line to allow chrome to accept the request and open the file?

    • http://ahmed.amayem.com ahmedamayem

      The solution is to request the page through a server not by directly opening it in chrome. I’m not talking about requesting files here.

  • Victoria ‘Eddie’ Etim

    This was really helpful Thank you