Cross Origin Request errors for my own JS file but not for external libraries. why?
Clash Royale CLAN TAG#URR8PPP
Cross Origin Request errors for my own JS file but not for external libraries. why?
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.
...so I'm trying to get a site displaying just using the c: or file:// path.
You can start a web server simply by
python -mSimpleHTTPServer– Anthony Kong
Apr 3 '17 at 23:33
python -mSimpleHTTPServer
loading a script using script tag has no "cross origin" limitations
– Jaromanda X
Apr 3 '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 3 '17 at 23:34
"extfiles/scripts.js" is a relative path or the URL. probably being translated to something like localhost:8080/extfiles/scripts.js. While "file:///<path>/extfiles/scripts.js", this is reading a file from disk directly, not from server, that's why it's complaining about XSS.
– Karis
Apr 4 '17 at 16:00
1 Answer
1
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.
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
...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 3 '17 at 23:31