Question

我是Sinatra和React JS的新手，因此我只想在我的Reat网站上在Sinatra服务器上进行GET调用，以显示纯文本。

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

React 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'));

Sinatra Server使用REST进行测试，应该可以正常工作。

不幸的是，如果我想连接我的React网站，我唯一能读到的就是：

enter image description here

在日志中，我的React网站的连接被识别：

::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

我真的希望有人可以帮助我，所以提前致谢！

窝

修改

我忘记了一些事情，如果我启动我的网站，它会收集警告：

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

没有看到更多，很难说出确切的问题是什么，但如果我不得不猜测，我会说这可能与CORS预检有关，因为你得到的回报很少。这也解释了为什么可以加载静态内容。

看起来你正用response.headers['Access-Control-Allow-Origin'] = 'http://localhost:8080'为自己的逻辑手动滚动。您没有设置所有CORS标头，这可能是请求未通过的原因。有关详情，请参阅Mozilla documentation。

手动滚动这种逻辑几乎总是一个坏主意。查看https://github.com/cyu/rack-cors或https://github.com/britg/sinatra-cross_origin。我推荐前者。它很容易配置，一旦你完成设置，你或多或少会忘记它。

React JS：来自Sinatra服务器的fetch调用没有答案

1 个答案: