Javascript Axios请求不获取推文
我正在尝试创建一个使用ReactJS制作的小型web应用程序,并尝试使用Twitter API获取推文,但当我执行代码时,出现以下错误: 我正在使用Axios进行HTTP请求,这是我的api.js文件Javascript Axios请求不获取推文,javascript,reactjs,twitter,twitter-oauth,Javascript,Reactjs,Twitter,Twitter Oauth,我正在尝试创建一个使用ReactJS制作的小型web应用程序,并尝试使用Twitter API获取推文,但当我执行代码时,出现以下错误: 我正在使用Axios进行HTTP请求,这是我的api.js文件 import axios from 'axios'; module.exports = { fetchTweets: (language) => { var config = { headers: { 'Authorization':
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;
import React,{Component}来自'React';
从“道具类型”导入道具类型;
从“../utils/api”导入api;
const SelectedLanguage=(道具)=>{
变量语言=['react','node'];
返回(
{languages.map((lang,index)=>{
返回(
- props.onSelect(lang)}
key={index}>
{lang}
)
})}
)
}
SelectedLanguage.propTypes={
selectedKeyword:PropTypes.string.isRequired,
onSelect:PropTypes.func.isRequired,
}
类ReactTweets扩展组件{
建造师(道具){
超级(道具);
此.state={
selectedKeyword:'反应',
tweets:null
}
this.updateLanguage=this.updateLanguage.bind(this);
}
componentDidMount(){
this.updateLanguage(this.state.selectedKeyword);
}
更新语言(lang){
this.setState(函数(){
返回{
selectedKeyword:lang,
tweets:null,
}
});
api.fetchTweets(lang)
。然后(tweets=>{
console.log(tweets);
});
}
render(){
返回(
);
}
}
导出默认的tweets;
我将非常感谢您的帮助:)
谢谢因为CORS,您将永远无法使此功能正常工作。您需要通过启用CORS的服务器从Twitter获取数据,而单纯通过前端应用程序是不可能的。只有当您试图从中获取数据的服务器允许此类请求时,这才起作用