2

I found this post

and tried to make cross domain request with jsonp but failed both on webpack dev server and live server.

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"));

Every time i receive response from server that "connection is not secure". Every ideas will be greatly appreciated.

Community
  • 1
  • 1
Lucky
  • 335
  • 1
  • 7
  • 23
  • 1
    *i receive response from server that "connection is not secure"* — Are you sure that's a response from the server and not the browser just refusing to mix HTTP and HTTPS? – Quentin May 19 '16 at 15:33
  • Thank you for answer. I am not sure. I put live example there http://www.luckyframe74.com/demo/happyReact/src/client/ – Lucky May 19 '16 at 15:35
  • Added https, still doesn't work – Lucky May 19 '16 at 15:52
  • Added // istead of http (https) still doesn't work. But connection shows in browser like "secure" already. – Lucky May 19 '16 at 16:19

1 Answers1

0

I think about that maybe, it's https And CORS ( Cross-Origin Resource Sharing) Policy violation.

  1. http -> https
  2. live Web server add-header (Cors header added)

reference URL ; http://enable-cors.org/index.html

minias
  • 69
  • 3