Javascript 如何从ReactJS web app向Django API发送POST请求？

我创建了一个非常简单的Django API。它返回一个固定的数值（仅用于测试目的）：

视图.py

from django.http import HttpResponse

def index(request):
    return HttpResponse(0)

我还使用React JS开发了一个简单的前端。为了开发后端和前端，我使用了以下两个教程：

• ReactJS：

• Django Python API：

现在我想从ReactJS向Django API发送一个POST请求，并传递

name

和

email

参数。我怎么做

这是我的App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fullname: "",
      emailaddress: ""
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    const target = event.target;
    const value = target.type === "checkbox" ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  handleSubmit(event) {
    event.preventDefault();
    console.log(this.state);
  }

  render() {
    return (
      <div className="App">
        <header>
          <div className="container">
            <nav className="navbar">
              <div className="navbar-brand">
                <span className="navbar-item">Forms in React</span>
              </div>
            </nav>
          </div>
        </header>
        <div className="container">
          <div className="columns">
            <div className="column is-9">
              <form className="form" onSubmit={this.handleSubmit}>
                <div className="field">
                  <label className="label">Name</label>
                  <div className="control">
                    <input
                      className="input"
                      type="text"
                      name="fullname"
                      value={this.state.fullname}
                      onChange={this.handleChange}
                    />
                  </div>
                </div>

                <div className="field">
                  <label className="label">Email</label>
                  <div className="control">
                    <input
                      className="input"
                      type="email"
                      name="emailaddress"
                      value={this.state.emailaddress}
                      onChange={this.handleChange}
                    />
                  </div>
                </div>

                <div className="field">
                  <div className="control">
                    <input
                      type="submit"
                      value="Submit"
                      className="button is-primary"
                    />
                  </div>
                </div>
              </form>
            </div>
            <div className="column is-3">
              <pre>
                <code>
                  <p>Full Name: {this.state.fullname}</p>
                  <p>Email Address: {this.state.emailaddress}</p>
                </code>
              </pre>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

import React，{Component}来自'React'；
从“/logo.svg”导入徽标；
导入“/App.css”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
全名：“，
电子邮件地址：“
};
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（活动）{
const target=event.target；
const value=target.type==“checkbox”？target.checked:target.value；
const name=target.name；
这是我的国家({
[名称]：值
});
}
handleSubmit（事件）{
event.preventDefault（）；
console.log（this.state）；
}
render（）{
返回(
反应中的形式
名称
电子邮件

全名：{this.state.fullname}

电子邮件地址：{this.state.emailaddress}


);
}
}
导出默认应用程序；

要从React应用程序发送HTTP请求，您有两个主要选项

可以使用集成的fetchapi（）或类似于axios（）的东西

为了从表单中获取信息，在每个输入上触发onChange，并将输入状态保存为组件状态

const response = fetch("endpoint_url",
            {
                method: 'POST',
                body: JSON.stringify({
                    this.state.name,
                    this.state.email
                    // Other body stuff
                }),
                headers: {
                    'X-Api-Key': API_KEY,
                    'Content-Type': 'application/json'
                    // Other possible headers
                }
            }
        );

在此之后，下面是一个使用

fetchapi

的示例：

最后，您需要使用

const responseJson=response.JSON（）将响应解析为JSON

这回答了你的问题吗？
也许是这样的？谢谢我尝试了这种方法，但出现了错误：
Access to fetch at'http://localhost:8000/“起源”http://localhost'已被CORS策略阻止：对飞行前请求的响应未通过访问控制检查：请求的资源上不存在'access control Allow Origin'标头。如果不透明响应满足您的需要，请将请求的模式设置为“无cors”，以获取禁用cors的资源。
这是与Django相关的问题，而不是React。CORS，或
跨源资源共享
是一种安全功能，可阻止某些未经授权的请求。为了解决这个问题，您必须将allow头添加到Django API中，并对触发请求的域进行授权。在这种情况下，如果是远程域，则可能是
localhost
或任何其他。@ScalaBoy您需要在API上允许
跨源资源共享
（在您的情况下是Django），如何解决？我采用了这种方法，但代码仍然失败，出现CORS错误。这是一个完全不同的问题，试着在Django子论坛上提问，我没有直接与Django合作。
const response = fetch("endpoint_url",
            {
                method: 'POST',
                body: JSON.stringify({
                    this.state.name,
                    this.state.email
                    // Other body stuff
                }),
                headers: {
                    'X-Api-Key': API_KEY,
                    'Content-Type': 'application/json'
                    // Other possible headers
                }
            }
        );