axios 和 reactjs：预检响应具有无效的 HTTP 状态代码 400答案

【问题标题】：axios and reactjs: Response for preflight has invalid HTTP status code 400axios 和 reactjs：预检响应具有无效的 HTTP 状态代码 400
【发布时间】：2018-09-06 22:00:18
【问题描述】：

我有一个使用 reactjs 和 axios 制作的 index.html。它是从我的 apache localhost 提供的。

我正在我的 chrome 浏览器中打开链接 http://localhost/~user/index.html。我已经使用 chrome 中的插件启用了 CORS。

当我尝试将 axios 与 twitter api 一起使用时，我得到：

Response for preflight has invalid HTTP status code 400

下面是axios的代码：

          var url = 'https://api.twitter.com/1.1/search/tweets.json';
          axios({ 
              url: url,
              method:'get',
              q:'twitterapi',
              json:'true',
              headers: {
                  "Authorization": "Bearer "+this.state.bearer_token,
                  'Content-Type' : 'application/json'
              }
          })
          .then(function(response) {
                    this.setState(prevState => ({
                        get_json: response
                      })
                    )
          })
          .catch(function(error){
            console.log(error);
          });

index.html的完整代码如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Twitter API</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>

  <body>
    <div id="root"></div>

  <script type="text/babel">

    class Module extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
            bearer_token:"&&&&&&&&&&&&&***************++++++++++++++++++++++++++++",
            get_json:""
          }

          this.handleClickGetJSON = this.handleClickGetJSON.bind(this)

      }

      handleClickGetJSON(){
          var url = 'https://api.twitter.com/1.1/search/tweets.json';
          axios({ 
              url: url,
              method:'get',
              q:'twitterapi',
              headers: {
                  "Authorization": "Bearer "+this.state.bearer_token,
                  'Content-Type' : 'application/json'
              }
          })
          .then(function(response) {
                    this.setState(prevState => ({
                        get_json: response
                      })
                    )
          })
          .catch(function(error){
            console.log(error);
          });
      }

        render() {
          return (
            <div>
            <p>{ this.state.bearer_token }</p>
            <p>{ this.state.get_json }</p>
            <button  onClick={this.handleClickGetJSON}>GetBearerToken</button>
            </div>

          );
        }
      }

  ReactDOM.render(
      <Module />,
      document.getElementById('root')
  );
  </script>
  </body>
</html>

【问题讨论】：

标签： reactjs google-chrome cors twitter-oauth axios

【解决方案1】：

对于预检请求，您应该有以下两个标头：

访问控制请求方法：GET/POST/OPTIONS
Access-Control-Request-Headers：您希望在请求中传递的标头。

这些请求标头正在向服务器请求发出实际请求的权限。您的预检响应需要确认这些标头才能使实际请求生效。

对于跨域调用，浏览器通常会在实际调用之前进行 OPTIONS 调用。您的服务器基本上需要允许该方法。

【讨论】：

我明白了。现在我必须从浏览器以外的后端获取 api。比如 curl 等
我只对 axios POST 请求有同样的问题。我收到“飞行前响应具有无效的 http 状态代码”。我在我的 API 的 CORSMiddleware 中添加了上面提到的标头。更多信息请参考stackoverflow.com/questions/51379356/…。