CORS请求处于反应状态

CORS request in react

本文关键字：状态 于反应 请求 CORS      更新时间：2023-09-26

尝试使用simple-Twitter:从Twitter API获取内容时出现此错误

XMLHttpRequest cannot load https://api.twitter.com/1.1/statuses/user_timeline.json. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 400

我基本上完全按照react文档中的内容进行操作，但替换了相关行：

  componentDidMount: function() {
    twitter.get('statuses/user_timeline', function(error, data) {
      if(this.isMounted()){
        this.setState({tweets: data})
        console.dir('callback')
      }
    }.bind(this));
  }

回调函数似乎从未启动，我认为这是由于请求没有完成。

我在这里错过了什么？

这里的问题是您使用的模块是为Node编写的，而不是为浏览器编写的。

在浏览器中，除非请求的资源具有适当的Access-Control-Allow-Origin标头，否则您不能在来源之外（在本例中为localhost:3000）发出请求。

在这种情况下，浏览器向同一资源发出飞行前（OPTIONS）请求，以查看CORS检查是否通过，是否可以安全响应。在这种情况下，它不能，因为Twitter的API不允许你的来源。

如果API支持JSONP，则可以避免这些限制，但从Twitter API的V1.1开始，仅支持OAuth。

这意味着，要从客户端访问Twitter API，您需要在会话内部进行身份验证，以便生成可用于进行请求的OAuth令牌。看看codebird js库。

或者，您可以从服务器使用simple-twitter模块，并将请求从浏览器转发到twitter API。

相关文章：