使用React处理ajax JSONP

Question

我发现了这个帖子

并尝试使用jsonp进行跨域请求，但在webpack-dev服务器和live服务器上都失败了。

Full code
 official_ajax.jsx   
const UserGist = React.createClass({
  getInitialState: function() {
    return {
      username: '',
      login: ''
    };
  },
  componentDidMount: function() {
    $.ajax({
      url: this.props.serverPath,
      dataType: 'jsonp',
      cache: false,
      success: function(data) {
        const title = data[0];
        this.setState ({
        username:title.title,
        login:title.link
        });
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.serverPath, status, err.toString());
      }.bind(this)
    });
  },
  render:function() {
  return (
  <div>
  {this.state.username} and <a href = {this.state.login}>here</a>
  </div>
  );
 }
});
export default UserGist;
index.jsx
import UserGist from './official_ajax.jsx';
class App extends React.Component {
    render () {
        return (
        <div>
        <UserGist serverPath = "http://api.flickr.com/services/feeds/groups_pool.gne?id=807213@N20&lang=en-us&format=json&jsoncallback=?" />
        </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById("app"));

每次我从服务器收到"连接不安全"的响应时。每一个想法都将受到极大的赞赏。

Answer 1

我想也许，这违反了https和CORS（跨源资源共享）策略。

1. http->https
2. 实时Web服务器添加标头（已添加Cors标头）

引用URL；http://enable-cors.org/index.html