为什么 Twitter API 调用在 Node.js 中工作正常但在 ReactJS 中导致 400 错误？

Question

我在 ReactJS 中开发时运行一直遇到一个问题，即我的 API 调用导致 400 Bad Request 错误，即使代码在 ReactJS 之外工作正常。

以下是 (A) 运行在 NodeJS 本地运行良好的代码，以及 (B) React 环境中的相同代码。（在这两种情况下都已安装依赖项。）(A) NodeJS 代码运行非常好，但 (B) React 代码产生错误：

Failed to load https://api.twitter.com/oauth2/token?grant_type=client_credentials: Response for preflight has invalid HTTP status code 400.

(A) Node.js 中的代码运行:

var getBearerToken = require('get-twitter-bearer-token')
var Twitter = require('twitter');

var key = ENV.KEY;
var secret = ENV.SECRET;

getBearerToken(key, secret, (err, res) => {
  if (err) {
    // handle error
  } else {
    var client = new Twitter({
      bearer_token: res.body.access_token,
    });
    client.get('search/tweets', {q: '#WorldCup'}, function(error, tweets, response) {
      console.log(tweets);
    });
  }
})

(B) ReactJS 中完全相同的代码运行：

import React, { Component } from 'react';

var getBearerToken = require('get-twitter-bearer-token')
var Twitter = require('twitter');

export default class StockTwitter extends Component {

    componentDidMount() {
      this.setTwitter();
    }

    setTwitter() {

      var key = ENV.KEY;
      var secret = ENV.SECRET;

      getBearerToken(key, secret, (err, res) => {
        if (err) {
          // handle error
        } else {
          var client = new Twitter({
            bearer_token: res.body.access_token,
          });
          client.get('search/tweets', {q: '#WorldCup'}, function(error, tweets, response) {
            console.log(tweets);
          });
        }
      })
    }

    render() {
      return (
        <div>TBD</div>
      )
    }
}

Answer 1

Express构建了一个带有API和路由的服务器，你可以在你的express服务器上调用twitter，然后通过你的前端调用你自己的后端。

有些人可能称之为代理服务器

Scotch IO Tutorial, express and routes, it's decent

这是一个示例构建，在 github 上分叉，其中包含您的代码：hcra twitter build。还没有拉出推文并显示它们或其他任何东西，但它们确实加载了。剩下的由你决定，如果你在构建或运行任何事情上遇到问题，请告诉我。

哦，是的，您需要将其下拉运行 git fetch，然后结帐 twitter-req 分支。

为什么 Twitter API 调用在 Node.js 中工作正常但在 ReactJS 中导致 400 错误？

Why does Twitter API call work fine in Node.js but result in a 400 Error in ReactJS?

api

node.js

http-status-code-400

reactjs