I'm trying to make a POST request from my frontend(react) to my backend(python, flask and MySql) but I'm getting this error message.
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.
Network Tab Error Message
I am getting this on the server terminal, it's not showing me the POST method.
I'm not getting this error message while making a GET request, it's only happening in the POST request but POST is working fine if I make it from POSTMAN.
frontend form code
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;
createProduct action
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 code
import axios from "axios";
const API = axios.create({ baseURL: process.env.REACT_APP_BASE_URL });
export const createProduct = (newProduct) =>
API.post("/product", newProduct);
backend code:
@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
Postman request screenshot
Preflight request screenshot
