NextJS: 14.2.1 NextAuth: 4.24.7 Directus: 10.10.5
I want to update the current user's Details in a simple Form. I´m using the updateMe Function provided by Directus. When submitting my Form I´m getting the error:
I use their SDK Functions for Login and Registering as well and these are working fine.
My handleSubmit Function (i show the function until return, because in the return just follows a simple form which triggers handleInputChange:
'use client'
import { useRouter } from "next/navigation";
import { useState } from "react"
import { createDirectus, rest, updateMe } from '@directus/sdk';
export default function ProfilEdit({ userContent, userId }) {
const router = useRouter();
const [loading, setLoading] = useState(false);
const [formData, setFormData] = useState({
first_name: "",
last_name: "",
email: "",
});
const [error, setError] = useState("");
const client = createDirectus('*****MYDIRECTUSURL').with(rest());
const handleInputChange = (e) => {
setFormData({
...formData,
[e.target.name]: e.target.value,
});
};
const handleFormSubmit = async (e) => {
e.preventDefault();
setLoading(true);
try {
const response = await client.request(updateMe({
first_name: formData.first_name,
last_name: formData.last_name,
email: formData.email,
}));
if (response.data) {
router.push('/dashboard');
} else {
setError('Fehler beim Aktualisieren des Benutzers');
}
} catch (error) {
setError('Fehler beim Aktualisieren des Benutzers');
console.log(error);
}
setLoading(false);
};
First i thought that the Problem could be that the request comes from the unsecured localhost, but i deployed it and had the same problem. I also tried to just work with a PATCH request, but this didn´t work as well. I also set all the Permissions of all the user Roles to allow everything (just for testing)
Again: Login and Registering with the SDK are working...
I tried to do this PATCH with Postman and it worked, but why?
I found the Solution:
The Problem was with the CORS Settings of the Directus API.
You need to add this to the Directus config:
ORS_ENABLED: "true"
CORS_ORIGIN: "true"