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

Posted 2023-02-25

【中文标题】从源“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'

【发布时间】：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 有时被视为不同的来源。就像“本地主机”这个词。大多数时候它们是可以互换的，但在这种情况下可能不是。

【参考方案1】：

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