获取失败

Question

我在react项目中有一个登录页面。我一直试图用fetch api来调用我的django rest-api，但没有任何工作。这是我的组件代码。

import fetch from 'isomorphic-fetch'

export default class LogInComponent extends Component {
    handleLoginButtonClick() {
        var payload = {
            passwor:1,
            username: 2
        };
        var data =  new FormData();
        data.append( "json", JSON.stringify( payload ) );
        console.log(data);

        console.log("test");
        fetch('https://myname-backend.appspot.com/auth/login/', {
                method: "POST",
                headers: {
                    'Content-Type': 'application/json'
                },
                body: data
            }
        )
            .then(function(res){ return res.json(); })
            .then(function(data){ alert( JSON.stringify( data ) ) })

            .catch(function(error) {
            console.log('There has been a problem with your fetch operation: ' + error.message);
        });

    }

    render(){
        return (
            <div className="LoginPage">
                <div className="login-page">
                    <div className="form">
                        <form className="login-form">
                            <input id="username" type="username" placeholder="username"/>
                            <input id="password" type="password" placeholder="password"/>
                            <button onClick={this.handleLoginButtonClick}>login</button>
                            <p className="message">Not registered? <a href="#">Request Username and Password</a></p>
                        </form>
                    </div>
                </div>
            </div>
        );
    }
} 

我不知道我做错了什么？当我在fetch api中包含标题时，没有获得有效负载（api只是获取选项），当我不包含标题时，它会抛出415错误。我也附上我的api端点的截图

错误

错误