React 和 Flask POST 请求错误：CORS 策略：没有“Access-Control-Allow-Origin”

Question

我正在尝试将表单数据从一个简单的反应控制表单发送到我的烧瓶服务器。我的烧瓶服务器似乎接收到数据，但我无法发送响应，我收到此错误。我想在输入字段下方的反应页面中显示响应。这很容易在烧瓶中使用 return render_template 完成

如果可以的话，请帮忙，否则谢谢。

错误：

Access to XMLHttpRequest at 'http://127.0.0.1:5000/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我的 React 目录结构如下所示：

form
    api/ticker.py

    src
        components/Form.js
        app.js
   

这是我的 package.json：

{
  "name": "form-handling-example",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "axios": "^0.20.0",
    "cors": "^2.8.5",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "http://127.0.0.1:5000"
}

我的 Flask 应用如下所示：

from flask import Flask, request, render_template, jsonify, json
from flask_cors import CORS, cross_origin

app = Flask(__name__)

CORS(app, support_credentials=True)


@app.route("/", methods=['POST'])
@cross_origin(supports_credentials=True)
def contracts():

    react_form_data = request.get_json()

    ticker = react_form_data['ticker']

    return ticker


if __name__ == "__main__":
    app.run(debug=True)

这是组件/Form.js 文件：

import React, { Component } from "react";
import axios from "axios";

class Form extends Component {
  constructor(props) {
    super(props);

    this.state = {
      ticker: "",
    };
  }

  handleTickerChange = (event) => {
    this.setState({
      ticker: event.target.value,
    });
  };

  handleSubmit = (event) => {
    event.preventDefault();
    console.log(this.state);
    axios
      .post("http://127.0.0.1:5000", this.state)
      .then((response) => {
        console.log(response);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <div>
          <label>Ticker </label>
          <input
            type="text"
            name="ticker"
            value={this.state.ticker}
            onChange={this.handleTickerChange}
          />
          <button type="submit">Submit</button>
        </div>
      </form>
      {ticker}
    );
  }
}

export default Form;

Answer 1

您需要在 Flask 中安装 CORS 处理程序，以将正确的标头返回给浏览器。

安装flask-cors 并按照文档进行操作。