0

This is my HTML code, it worked fine couple months ago? I'm copying full path and running it on browser, with Ubuntu. Is this something to do with React not working with that?

<div id='root'></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

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

Here is part of my JS, where I render the stuff. Should work fine. I left out the functions that give functionality to program itself.

  render: function() {
      return (
        <div className="todoListMain">
          <div className="header">
            <form onSubmit = {this.addItem}>
              <input ref={(a) => this._inputElement = a}
                placeholder="enter task">
              </input>
              <button type="submit">add</button>
            </form>
          </div>
          <TodoItems entries={this.state.items}/>
        </div>
      );
    }
});


ReactDOM.render(
  <TodoList/>,
    document.getElementById('root')
);

This all worked fine while ago, tho that time I used wamp localhost with windows.

Riku
  • 107
  • 3
  • 11
  • Any console errors? – jmargolisvt Nov 01 '17 at 17:39
  • Good point. Actually yes, I fully don't understand what this means: browser.min.js:4 Failed to load file:///home/riku/Nettisivut/React1/app.js: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. – Riku Nov 01 '17 at 17:41
  • I think this has to do with the recent security feature added by chrome which will disallow CORS for non-http/https requests. Running it on a local server with http-server or wamp should fix it. Similar scenario: https://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-when-loading-a-local – Vorcan Nov 01 '17 at 17:46
  • Always use local server for development. Find any tutorial/guide on how to setup local web server. `file://` urls wont work. – abhishekkannojia Nov 01 '17 at 17:50

1 Answers1

0

It seems that you're loading your html file directly from your filesystem (file://) and React and Babel libraries from a CDN.

Your browser seems to refuse that for security reasons.

Either you put the React and Babel libraries on your filesystem next to your app.js

Or you load your application via an http via a web server.

Jalil
  • 3,150
  • 3
  • 30
  • 39