使用 React 处理 ajax JSONP答案

【问题标题】：Handling ajax JSONP with React使用 React 处理 ajax JSONP
【发布时间】：2016-09-16 14:34:08
【问题描述】：

并尝试使用 jsonp 进行跨域请求，但在 webpack 开发服务器和实时服务器上均失败。

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

每次我从服务器收到“连接不安全”的响应时。每个想法将不胜感激。

【问题讨论】：

我从服务器收到“连接不安全”的响应 — 你确定这是来自服务器的响应，而不是浏览器拒绝混合 HTTP 和 HTTPS？
感谢您的回答。我不知道。我把现场例子放在那里luckyframe74.com/demo/happyReact/src/client
加了https，还是不行
已添加 // 代替 http (https) 仍然不起作用。但是连接已经在浏览器中显示为“安全”。

标签： ajax reactjs jsonp webpack-dev-server

【解决方案1】：

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

http -> https
实时 Web 服务器添加标头（添加了 Cors 标头）

参考网址； http://enable-cors.org/index.html

【讨论】：