title: CORS Errors only with 400 bad request react fetch request
body: <p>I'm trying to make <code>'POST'</code> request in react but i'm getting a few problems regarding CORS. I was just following what console says and fix them in <strong>server side</strong> [<em>which is <code>PHP</code></em>] and <strong>client side</strong> everything works fine when the status is 200 but when status 400 it shows </p>
  
  <blockquote>
    <p>login:1 Failed to load <a href="http://192.168.0.102/API/" rel="noreferrer">http://192.168.0.102/API/</a>: No
    'Access-Control-Allow-Origin' header is present on the requested
    resource. Origin '<a href="http://localhost:3000" rel="noreferrer">http://localhost:3000</a>' is therefore not allowed
    access. <strong>The response had HTTP status code 400</strong>. If an opaque response
    serves your needs, set the request's mode to 'no-cors' to fetch the
    resource with CORS disabled.</p>
  </blockquote>
  
  <p>I've tried to add <code>mode: 'no-cors'</code> but that's doesn't work it shows</p>
  
  <blockquote>
    <p>Uncaught (in promise) SyntaxError: Unexpected end of input</p>
  </blockquote>
  
  <p><strong>Server Side 'PHP Slimframework' headers:</strong></p>
  
  <pre><code>$app-&gt;add(function ($req, $res, $next) {
      $response = $next($req, $res);
      return $response
          -&gt;withHeader('Access-Control-Allow-Origin', 'http://localhost:3000')
          -&gt;withHeader('Origin', 'http://localhost:3000')
          -&gt;withHeader('Access-Control-Allow-Headers', 'Origin, Content-Type, Accept, X-Auth-Token')
          -&gt;withHeader('Access-Control-Allow-Credentials', 'true')
          -&gt;withHeader('Access-Control-Request-Headers', 'Origin, X-Custom-Header, X-Requested-With, Authorization, Content-Type, Accept')
          -&gt;withHeader('Access-Control-Expose-Headers', 'Content-Length, X-Kuma-Revision')
          -&gt;withHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS');
  });
  </code></pre>
  
  <p><strong>Client Side</strong></p>
  
  <p><strong>src/actions/userActions.js</strong></p>
  
  <pre><code>export function loginUsers(userData) {
      return new Promise((resolve, reject) =&gt;{
              fetch(URL,{
                  method: 'POST',
                  headers: {
                      'Content-Type': 'application/json',
                      'Accept': 'application/json',
                  },
                  credentials: 'include',
                  //mode: 'no-cors', // if it's on it will show Uncaught (in promise) SyntaxError: Unexpected end of input
                  body: JSON.stringify(userData),
              })
                  .then((response) =&gt; response.json())
                  .then((responseJson) =&gt;{
                      resolve(responseJson);
                  })
                  .catch((error) =&gt;{
                      reject(error)
                  })
          })
  }
  </code></pre>
  
  <p><strong>src/components/layout.js</strong></p>
  
  <pre><code>import React, {Component} from 'react';
  import { loginUsers } from '../actions/usersAction';
  
  class Layout extends Component {
      constructor(props){
          super(props);
          this.state = {
              username: '',
              password: '',
          };
          this.handleLogin = this.handleLogin.bind(this);
          this.onChange = this.onChange.bind(this);
      }
  
      onChange(e){
          this.setState({ [e.target.name] : e.target.value });
      }
  
  
  handleLogin(){
          if (this.state.username &amp;&amp; this.state.password){
              loginUsers(this.state).then((result) =&gt;{
                  let responseJSON = result;
                  console.log(responseJSON);
              });
          }
      }
  
      render() {
          return (
              &lt;div className="App"&gt;
                  &lt;input type="text" onChange={this.onChange} name="username" /&gt;
                  &lt;input type="password" onChange={this.onChange} name="password" /&gt;
                  &lt;button onClick={this.handleLogin}&gt;Sign in&lt;/button&gt;
              &lt;/div&gt;
          );
      }
  }
  
  
  
  
  export default Layout;
  </code></pre>
  
  <p>here screenshot getting this error only with bad request like 400
  <a href="https://i.stack.imgur.com/fWmcZ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/fWmcZ.png" alt="enter image description here"></a></p>
  
  <p>Please let me know if I miss out any information.</p>
  
  <p>If this has already been asked, I would greatly appreciate if you are able to point me in the right direction.</p>
  
  <p>Thank you so much!</p>