2017-05-25 51 views
0

我试图创建ReactJS做了一个小的web应用程序,我试图获取使用Twitter API的鸣叫,但是当我执行我的代码,我得到这个错误:爱可信请求不可抓取鸣叫

enter image description here

我使用Axios进行HTTP请求,这里是我的api.js文件。

import axios from 'axios'; 

module.exports = { 
    fetchTweets: (language) => { 
     var config = { 
     headers: { 
      'Authorization': 'OAuth oauth_consumer_key="consumer_key",oauth_token="token",oauth_signature_method="HMAC-SHA1",oauth_timestamp="1495723125",oauth_nonce="nonce",oauth_version="1.0",oauth_signature="signature"', 
     } 
     }; 

    var encodedURI = window.encodeURI('https://api.twitter.com/1.1/search/tweets.json?q='+ language +'&result_type=recent'); 

    return axios.get(encodedURI,config) 
    .then(function(response){ 
     console.log(response) 
    }); 
    } 
} 

鸣叫组件

import React, { Component } from 'react'; 
import PropTypes from 'prop-types'; 
import api from '../utils/api'; 

const SelectedLanguage = (props) =>{ 
    var languages = ['react', 'node']; 

    return (
    <ul className="languages"> 
     {languages.map((lang, index) => { 
     return (
      <li 
      style = { lang === props.selectedKeyword ? { color: '#d0021b'} : null } 
      onClick = {() => props.onSelect(lang) } 
      key  = { index }> 
      {lang} 
      </li> 
     ) 
     })} 
    </ul> 
) 
} 

SelectedLanguage.propTypes = { 
    selectedKeyword: PropTypes.string.isRequired, 
    onSelect: PropTypes.func.isRequired, 
} 

class ReactTweets extends Component { 
    constructor(props){ 
    super(props); 
    this.state = { 
     selectedKeyword: 'react', 
     tweets: null 
    } 
    this.updateLanguage = this.updateLanguage.bind(this); 
    } 

    componentDidMount() { 
    this.updateLanguage(this.state.selectedKeyword); 
    } 

    updateLanguage(lang){ 
    this.setState(function() { 
     return { 
     selectedKeyword: lang, 
     tweets: null, 
     } 
    }); 
    api.fetchTweets(lang) 
     .then(tweets => { 
     console.log(tweets); 
     }); 
    } 

    render() { 
    return (
     <div> 
     <SelectedLanguage 
      selectedKeyword={this.state.selectedKeyword} 
      onSelect={this.updateLanguage} 
     /> 
     </div> 
    ); 
    } 
} 

export default ReactTweets; 

我会很感激你的帮助:) 感谢

回答

0

你将永远无法获得,因为CORS的这个工作。您需要通过启用CORS的服务器获取Twitter上的数据,并且纯粹不可能通过前端应用程序。这只有在你试图从中获取数据的服务器允许这样的请求时才有效。