从源“http://localhost:3000”访问“http://127.0.0.1:5000/product”处的 XMLHttpRequest答案

【问题标题】：access to XMLHttpRequest at 'http://127.0.0.1:5000/product' from origin 'http://localhost:3000'从源“http://localhost:3000”访问“http://127.0.0.1:5000/product”处的 XMLHttpRequest
【发布时间】：2022-01-16 03:28:26
【问题描述】：

我正在尝试从前端（react）向后端（python、flask 和 MySql）发出 POST 请求，但收到此错误消息。

Access to XMLHttpRequest at 'http://127.0.0.1:5000/product' from origin 'http://localhost:3000' 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.

网络选项卡错误消息

我在服务器终端上得到这个，它没有显示 POST 方法。

我在发出 GET 请求时没有收到此错误消息，它只发生在 POST 请求中，但如果我从 POSTMAN 发出，则 POST 工作正常。

前端表单代码

import React, { useState } from "react";
import { useDispatch } from "react-redux";
import { createProduct } from "../../actions/products";
import Button from "./Button";
import Input from "./Input";
import Label from "./Label";

const Modal = ({ showModal, setShowModal }) => {
  const dispatch = useDispatch();
  const [name, setName] = useState("");
  const [unit, setUnit] = useState();
  const [pricePerUnit, setPricePerUnit] = useState();

  const handleSubmit = async (e) => {
    e.preventDefault();
    const product = {
      product_name: name,
      uom_id: parseInt(unit),
      price_per_unit: parseInt(pricePerUnit),
    };
    console.log(product);
    await dispatch(createProduct(product));
  };

  return (
                  <form onSubmit={handleSubmit}>
                    <div>
                      <Label children="Name" />
                      <Input
                        children="Name"
                        type="text"
                        value={name}
                        onChange={(e) => setName(e.target.value)}
                      />
                    </div>
                    <div>
                      <Label children="Unit" />
                      <Input
                        children="Unit"
                        type="number"
                        value={unit}
                        onChange={(e) => setUnit(e.target.value)}
                      />
                    </div>
                    <div>
                      <Label children="Price Per Unit" />
                      <Input
                        children="Price Per Unit"
                        type="number"
                        value={pricePerUnit}
                        onChange={(e) => setPricePerUnit(e.target.value)}
                      />
                    </div>
                    <div className="flex items-center justify-end py-6 border-t border-solid border-blueGray-200 rounded-b">
                      <button
                        className="text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
                        type="button"
                        onClick={() => setShowModal(false)}
                      >
                        Close
                      </button>
                      <Button type="submit">Save</Button>
                    </div>
                  </form>
  );
};

export default Modal;

创建产品操作

import * as api from "../api";
export const createProduct = (product) => async (dispatch) => {
  try {
    const { data } = await api.createProduct(product);
    dispatch({ type: "CREATE", payload: data });
    // toast.success("Product submitted");
  } catch (error) {
    console.log(error);
    // toast.error(error.message);
  }
};

../api API 代码

import axios from "axios";
const API = axios.create({ baseURL: process.env.REACT_APP_BASE_URL });

export const createProduct = (newProduct) =>
  API.post("/product", newProduct);

后端代码：

@app.route('/product', methods=['POST'])
def insert_product():
    request_payload = request.json
    print(request_payload)
    product_id = products_dao.insert_new_product(connection, request_payload)
    response = jsonify({
        'product_id': product_id
    })
    response.headers.add('Access-Control-Allow-Origin', '*')
    return response

邮递员请求截图

预检请求截图

【问题讨论】：

你能添加一个邮递员请求的例子吗？网址、标题和正文的屏幕截图。
@KeeganM 刚刚添加，请查看
尝试从本地主机的邮递员发出请求并查看响应
我已经从本地主机的邮递员发出请求
localhost 和 127.0.0.1 有时被视为不同的来源。就像“本地主机”这个词。大多数时候它们是可以互换的，但在这种情况下可能不是。

标签： python reactjs flask

【解决方案1】：

CORS 问题是由跨域请求引起的。确保服务器具有 CORS settings set up 并返回 Access-Control-Allow-Origin: * 标头。预检会检查是否允许跨站请求，然后才会发生真正的请求。

【讨论】：