Axios Anfrage Nicht Fetching Tweets

Question

Ich versuche, einen kleinen Web-App mit ReactJS zu schaffen gemacht, und ich versuche Tweets mit Twitter-API zu holen, aber wenn ich meinen Code ausführen Ich erhalte diese Fehler:

Ich verwende Axios für HTTP-Anfrage, hier ist meine api.js-Datei.

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

Tweets Komponente

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; 

würde ich wirklich zu schätzen Ihre freundliche Hilfe :) Dank

Answer 1

Sie werden nie wegen CORS diese Arbeit bekommen können. Sie müssen die Daten von Twitter über einen Server abrufen, auf dem CORS aktiviert ist und der nicht ausschließlich über Front-End-Anwendungen möglich ist. Dies würde nur funktionieren, wenn der Server, von dem Sie versuchen, die Daten zu erhalten, solche Anfragen erlaubt.