0

So I'm following this example to try to get React working on my computer.

https://gist.github.com/danawoodman/9cfddb1a0c934a35f31a

I note that I don't have access to a server and I can't install anything on this computer so I'm trying to get a site displaying just using the c: or file:// path.

This is my index.html code. Note I have saved the react, react-dom and browser scripts locally.

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>React Hello World</title>
  </head>
  <body>

    <div id='root'></div>
    <script src="extfiles/react.js"></script>
    <script src="extfiles/react-dom.js"></script>
    <script src="extfiles/browser.min.js"></script>
    <script src="extfiles/scripts.js" type="text/babel"></script>
  </body>
</html>

My scripts.js file is simply 

ReactDOM.render(<h1>Hello World</h1>, document.getElementById('root'));

I'm getting this error.

XMLHttpRequest cannot load file:///<path>/extfiles/scripts.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.transform.load @ browser.min.js:4

I understand why I'm getting this error from posts such as "Cross origin requests are only supported for HTTP." error when loading a local file.

What I don't understand is why I don't get this error loading up the react library but only when I load up my own files. Because if I change

<script src="extfiles/scripts.js" type="text/babel"></script>

to

    <script type="text/babel">
    ReactDOM.render(<h1>Hello World</h1>, document.getElementById('root'));
</script>

Then that works indicating to me that ReactDOM has been loaded.

Community
  • 1
  • 1
Diskdrive
  • 18,107
  • 27
  • 101
  • 167
  • 1
    `...so I'm trying to get a site displaying just using the c: or file:// path.` This is your problem. The content must be served via http/https – Anthony Kong Apr 03 '17 at 23:31
  • You can start a web server simply by `python -mSimpleHTTPServer` – Anthony Kong Apr 03 '17 at 23:33
  • loading a script using script tag has no "cross origin" limitations – Jaromanda X Apr 03 '17 at 23:33
  • @AnthonyKong : yeah i know - but what I'm trying to understand is why i can load the react library but not my own files. – Diskdrive Apr 03 '17 at 23:34
  • "extfiles/scripts.js" is a relative path or the URL. probably being translated to something like http://localhost:8080/extfiles/scripts.js. While "file:////extfiles/scripts.js", this is reading a file from disk directly, not from server, that's why it's complaining about XSS. – Karis Apr 04 '17 at 16:00

1 Answers1

0

Building off of the answers given in the comments since this seems to be a common problem for new React developers.

The cross-origin request error the browser generates when you try to load a local file exists to prevent cross-site scripting (XSS) which involves injecting local scripts into a webpage and the server trusting those scripts.

Because of this, you can't load local scripts; you need to serve them over HTTP or HTTPS instead. A simple way to do this is to use a local web server such as MAMP or, as @AnthonyKong said in a comment, Python's SimpleHTTPServer feature.

Additionally, React has a developer tools plugin for Chrome and Firefox that gives you the option to allow local scripts for development.

Adam
  • 3,829
  • 1
  • 21
  • 31