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

Question

我正在使用 reactjs 和 axios 制作 index.html。它由我的 apache 本地主机提供。

我正在 chrome 浏览器中打开 link http://localhost/~user/index.html。我在 chrome.

中使用插件启用了 CORS

当我尝试在 Twitter 上使用 axios 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>

Answer 1

对于预检请求，你应该有这两个headers:

Access-Control-Request-Method : GET/POST/OPTIONS
Access-Control-Request-Headers: Headers 你想在你的请求中传递。

这些请求 headers 正在请求服务器授予发出实际请求的权限。您的飞行前响应需要确认这些 headers 才能使实际请求生效。

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

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

axios and reactjs: Response for preflight has invalid HTTP status code 400

reactjs

google-chrome

cors

twitter-oauth

axios