PUT request failed

System Information
  • Strapi Version: v4
  • Operating System: Mac
  • Database: Graphql
  • Node Version: 16
  • NPM Version:
  • Yarn Version:

I am trying to get feedback from users on a personal project. Unfortunately, I am not able to connect with Strapi. I am using Next.js on the front end. This is my feedback.tsx inside the pages folder

const Feedback = ({
  campaign,
  item,
}: {
  campaign: StrapiProps;
  item: StrapiMapped;
}) => {
  const [feedback, setFeedback] = useState("");
  const [id, setId] = useState("");
  const [feedbacksArray, setFeedbacksArray] = useState<
    { Platform: string; AssetTitle: string; feedback: string }[]
  >([]);
  const [submitted, setSubmitted] = useState<boolean>();

  const submitFeedback = async () => {
    try {
      fetch(`${process.env.NEXT_PUBLIC_STRAPI_URL}/api/campaigns/${id}}`, {
        method: "PUT",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${process.env.NEXT_PUBLIC_AUTH_TOKEN}`,
          email: "joa@email.com",
          password: "password",
        },
        body: JSON.stringify({
          Feedback:
            feedbacksArray != null
              ? [...feedbacksArray, [item.Platform, item.AssetTitle, feedback]]
              : [[item.Platform, item.AssetTitle, feedback]],
        }),
      });
    } catch (error) {
      console.log("error feedback catch", error);
    }
  };
  console.log("feedbacksArray", feedbacksArray);
  console.log("feedback", feedback);

  return (
    <div className="feedback-wrapper">
      <h3 className="feedback-title">Feedback</h3>
      <form className="feedback-form">
        <textarea
          className="feedback-textarea"
          placeholder="Add your feedback here.."
          rows={5}
          value={feedback}
          onChange={(e) => {
            setFeedbacksArray(campaign.attributes.Feedback);
            setFeedback(e.target.value);
            setId(campaign.id);
          }}
        />
        <button
          onClick={(e) => {
            e.preventDefault();
            submitFeedback();
            feedback ? setSubmitted(true) : setSubmitted(false);
          }}
          type="submit"
        >
          Submit
        </button>
      </form>
      <div className="feedback-submitted">
        {submitted ? <p className="from-them">{feedback}</p> : ""}
      </div>
    </div>
  );
};

export default Feedback;

Also, I am using Graphql and Apollo-Client to fetch the data inside the API folder.
The error that I get after I tried to submit the form is in the below screenshot.

Think you need to allow CORS in middleware.js

Hi @Eventyret I have done that, but it changes the error. I am having a 403 forbidden error now. Thanks for your advise.