0

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>
  );
}

0 Answers0