Here is my NextJs code, I want to submit a form to my back-end database(Flask & Sqlite). I have used Postman to send the POST request to my back-end and the submission success.
When I submit a POST request by NextJs, it shows the error:
Access to fetch at 'http://localhost:5000/form' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Many thanks if someone can solve my problem.
import { useState, useEffect} from "react";
export default function Applystudent({}) {
const [email, setEmail] = useState("");
const [title, setTitle] = useState("");
const submitApplication = (e) => {
fetch("http://localhost:5000/form", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ email, title }),
});
};
return (
<div>
<div>
<h1>Student Application</h1>
<form onSubmit={submitApplication}>
<div>
<label htmlFor="title">Your Name</label>
<input
type="text"
id="title"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
<label htmlFor="email">Your Email</label>
<input
type="email"
id="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
</div>
<button type="submit">submit</button>
</form>
</div>
</div>
);
}