title: axios and reactjs: Response for preflight has invalid HTTP status code 400
body: <p>I am having an index.html made using reactjs and axios. Its being served from my apache localhost.</p>
  
  <p>I am opening the link <code>http://localhost/~user/index.html</code> in my chrome browser. I have enabled CORS using a plugin in chrome.</p>
  
  <p>When i try to use axios with twitter api I get:</p>
  
  <pre><code>Response for preflight has invalid HTTP status code 400
  </code></pre>
  
  <p>The below is the code for axios:</p>
  
  <pre><code>          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 =&gt; ({
                          get_json: response
                        })
                      )
            })
            .catch(function(error){
              console.log(error);
            });
  </code></pre>
  
  <p>The full code of index.html is as follows</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8" /&gt;
      &lt;title&gt;Twitter API&lt;/title&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://unpkg.com/axios/dist/axios.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div id="root"&gt;&lt;/div&gt;
  
    &lt;script type="text/babel"&gt;
  
      class Module extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
              bearer_token:"&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;***************++++++++++++++++++++++++++++",
              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 =&gt; ({
                          get_json: response
                        })
                      )
            })
            .catch(function(error){
              console.log(error);
            });
        }
  
          render() {
            return (
              &lt;div&gt;
              &lt;p&gt;{ this.state.bearer_token }&lt;/p&gt;
              &lt;p&gt;{ this.state.get_json }&lt;/p&gt;
              &lt;button  onClick={this.handleClickGetJSON}&gt;GetBearerToken&lt;/button&gt;
              &lt;/div&gt;
  
            );
          }
        }
  
    ReactDOM.render(
        &lt;Module /&gt;,
        document.getElementById('root')
    );
    &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>