React JS: keine Antwort von Sinatra Server mit Aufruf holen

Question

Ich bin ziemlich neu zu Sinatra und React JS, daher wollte ich nur einen GET-Aufruf von meiner React-Website auf einem Sinatra-Server, um einen Klartext anzuzeigen.

Sinatra Server:

require 'sinatra' 

set :root, 'lib/app' 

before do 
    response.headers['Access-Control-Allow-Origin'] = 'http://localhost:8080' 
    response.headers['Accept'] = 'gridoperator' 
    response.headers['Content-Type'] = 'gridoperator' 
end 

get '/gridoperator' do 
    'Hello root gridoperator' 
end 

Reagieren JS:

var Gridoperator_div = React.createClass({ 

    getInitialState: function(){ 
    return({ 
     call_name: 'initial' 
    }); 
    }, 

    componentDidMount: function(){ 

    fetch('http://localhost:4567/gridoperator', { 
     method: 'get' 
    }).then(response => response.text()) 
    .then(
     function(text){ 
      this.setState({ 
      call_name: text 
      }) 
    }); 

    }, 

    componentWillUnmount: function(){ 
    }, 

    render: function() { 
    return(
     <h1>Hello {this.state.call_name}!</h1> 
    ) 
    } 

}); 

ReactDOM.render(<Gridoperator_div/>, document.getElementById('gridoperator')); 

Der Sinatra Server mit REST getestet und funktionieren soll.

Leider, wenn ich mit meiner Reaktion Webseite verbinden wollen, das einzige, was ich lesen kann, ist dies:

enter image description here

Im Protokoll die Verbindung meiner React Website erkannt wird:

::1 - - [10/Feb/2017:21:28:00 +0100] "GET /gridoperator HTTP/1.1" 200 23 0.0000 
::1 - - [10/Feb/2017:21:28:00 Mitteleuropõische Zeit] "GET /gridoperator HTTP/1.1" 200 23 
http://localhost:8080/ -> /gridoperator 

Ich hoffe wirklich jemand kann mir helfen, also Danke im Voraus!

Fossa

bearbeiten

ich etwas vergessen, wenn ich meine Website starten, stellt es mit Warnungen:

WARNING in ./~/encoding/lib/iconv-loader.js 
Critical dependencies: 
9:12-34 the request of a dependency is an expression 
@ ./~/encoding/lib/iconv-loader.js 9:12-34 
webpack: Compiled with warnings. 

Answer 1

Ohne mehr zu sehen, ist es schwer zu sagen, was das genaue Problem ist, aber wenn ich raten müsste, würde ich sagen, dass es wahrscheinlich etwas mit der CORS Preflight ist, da du so wenig zurückbekommst. Das erklärt auch, warum statische Inhalte geladen werden können.

Es sieht so aus, als würden Sie Ihre eigene Logik dafür mit response.headers['Access-Control-Allow-Origin'] = 'http://localhost:8080' Hand-Rolling. Sie legen nicht alle CORS-Header fest, weshalb die Anforderungen möglicherweise nicht ausgeführt werden. Siehe Mozilla documentation für mehr.

Hand-rolling diese Art von Logik ist fast immer eine schlechte Idee. Überprüfen Sie https://github.com/cyu/rack-cors oder https://github.com/britg/sinatra-cross_origin. Ich empfehle das ehemalige. Es ist einfach zu konfigurieren und sobald Sie es eingerichtet haben, können Sie mehr oder weniger vergessen.