CODEWITHSUNDEEP
reactjsgoogle-chromecorstwitter-oauthaxios
Santhosh
Santhosh

Reputation: 11774

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

I am having an index.html made using reactjs and axios. Its being served from my apache localhost.

I am opening the link http://localhost/~user/index.html in my chrome browser. I have enabled CORS using a plugin in chrome.

When i try to use axios with twitter api I get:

Response for preflight has invalid HTTP status code 400

The below is the code for 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);
          });

The full code of index.html is as follows

<!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>

Upvotes: 1

Views: 5817

Answers (1)

Sakshi Nagpal
Sakshi Nagpal

Reputation: 1033

For the preflight request, you should have these two headers:

  • Access-Control-Request-Method : GET/POST/OPTIONS
  • Access-Control-Request-Headers: Headers which you wanted to pass in your request.

These request headers are asking the server for permissions to make the actual request. Your preflight response needs to acknowledge these headers in order for the actual request to work.

For Cross Domain calls, browser generally make an OPTIONS call before the actual call. Your server basically need to allow that method.

Upvotes: 1

Related Questions