CORS Fehler nur mit 400 bad request reagieren fetch-Anfrage

Ich versuche, mich 'POST' Anfrage im reagieren, aber ich bin immer ein paar Probleme bezüglich CORS. Ich war nur nach, was die Konsole sagt, und befestigen Sie Sie in server-Seite [die PHP] und client-Seite funktioniert alles wunderbar, wenn der status 200 aber, wenn der status 400, zeigt

login:1 konnte nicht geladen werden http://192.168.0.102/API/: Nein
'Access-Control-Allow-Origin' - header vorhanden ist, auf die angeforderte
Ressource. Herkunft 'http://localhost:3000' ist daher nicht erlaubt
- Zugang. Die Antwort hatte Sie den HTTP-status-code 400. Wenn eine undurchsichtige Antwort
dient Ihre Bedürfnisse, setzen der request-Modus auf 'no-cors' zu Holen
Ressource mit CORS deaktiviert.

Habe ich versucht, um mode: 'no-cors' aber das funktioniert nicht es zeigt

Nicht erfasste (bei Versprechen) SyntaxError: Unexpected end of input

Server-Seite "PHP Slimframework' Header:

$app->add(function ($req, $res, $next) {
    $response = $next($req, $res);
    return $response
        ->withHeader('Access-Control-Allow-Origin', 'http://localhost:3000')
        ->withHeader('Origin', 'http://localhost:3000')
        ->withHeader('Access-Control-Allow-Headers', 'Origin, Content-Type, Accept, X-Auth-Token')
        ->withHeader('Access-Control-Allow-Credentials', 'true')
        ->withHeader('Access-Control-Request-Headers', 'Origin, X-Custom-Header, X-Requested-With, Authorization, Content-Type, Accept')
        ->withHeader('Access-Control-Expose-Headers', 'Content-Length, X-Kuma-Revision')
        ->withHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS');
});

Client-Seite

src/actions/userActions.js

export function loginUsers(userData) {
    return new Promise((resolve, reject) =>{
            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) => response.json())
                .then((responseJson) =>{
                    resolve(responseJson);
                })
                .catch((error) =>{
                    reject(error)
                })
        })
}

src/components/layout.js

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 && this.state.password){
            loginUsers(this.state).then((result) =>{
                let responseJSON = result;
                console.log(responseJSON);
            });
        }
    }

    render() {
        return (
            <div className="App">
                <input type="text" onChange={this.onChange} name="username" />
                <input type="password" onChange={this.onChange} name="password" />
                <button onClick={this.handleLogin}>Sign in</button>
            </div>
        );
    }
}




export default Layout;

screenshot hier immer diese Fehlermeldung nur mit wie 400 bad request

Bitte lassen Sie mich wissen, wenn ich verpassen keine Informationen.

Wenn das schon gefragt wurde, würde ich mich sehr freuen, wenn Sie in der Lage sind, zu zeigen mich in die richtige Richtung.

Vielen, vielen Dank!