如何从 ReactJS Web 应用程序向 Django API 发送 POST 请求？

Posted 2023-02-24

【中文标题】如何从 ReactJS Web 应用程序向 Django API 发送 POST 请求？

【英文标题】：How to send POST request to Django API from ReactJS web app?

【发布时间】：2019-04-06 23:09:37

【问题描述】：

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

views.py

from django.http import HttpResponse

def index(request):
    return HttpResponse(0)

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

ReactJS：https://mherman.org/blog/dockerizing-a-react-app/

Django Python API：https://semaphoreci.com/community/tutorials/dockerizing-a-python-django-web-application

现在我想从 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;

【问题讨论】：

可能是这样的？ techiediaries.com/react-ajax

【参考方案1】：

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

使用集成的 Fetch API (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) 或类似 axios (https://github.com/axios/axios) 的东西。

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

onChange = (prop: any, value: string) => 
  this.setState(
    [prop]: value
  );
;

之后，这是一个使用fetch API的示例：

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
  
);

最后你需要使用const responseJson = response.json();将响应解析为JSON

【讨论】：

谢谢。我尝试了这种方法，但出现错误：Access to fetch at 'http://localhost:8000/' from origin 'http://localhost' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

这是一个与 Django 相关的问题，而不是 React。 CORS 或Cross origin resource sharing 是一种安全功能，可阻止一些未经授权的请求。为了解决它，您必须将允许标头添加到 Django API 并授权您触发请求的域。在这种情况下，可能是 localhost 或其他任何远程域。

@ScalaBoy 您需要在您的 API 上允许 Cross Origin Resource Sharing（在您的情况下为 Django）

我该如何解决？我遵循了这种方法，但代码仍然失败并出现 CORS 错误github.com/crs4/ome_seadragon/wiki/…。还有这个：***.com/questions/35760943/…

这是一个完全不同的问题，尝试在 Django 子论坛上提问，我没有直接使用 Django。