I have the following code :
const pickPicture = async () => {
let result = await DocumentPicker.getDocumentAsync({});
const data = new FormData();
data.append("avatar", result.file);
axios
.post(
`${BASE_URL}/uploadAvatar`,
data,
{
headers: {
"Content-Type": "multipart/form-data",
},
}
)
.catch(function (error) {
console.log(error);
})
.then(function (res) {
changePicture(res);
})
}
const changePicture = (res) => {
let newPicture = res.data.filename;
let newUserData = {
picture: newPicture
}
axios
.post(
`${BASE_URL}/userData/update`,
{
token: token,
newUserData
},
{
headers: {
"Content-Type": "application/json",
},
}
).then((res) => {
console.log(res);
})
.catch(function (error) {
console.log(error);
});
};
It is used to update the user avatar. The first part works well, and send the picture to the backend where it is stored successfuly.
When the second axios request happens, it is blocked by cors whith this error :
Access to XMLHttpRequest at 'https://myUrl' from origin 'http://localhost:19006' 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.
But this is what is funny :
Later in the same component, I perform the exact same request in an other function (with different value in the newUserData object) to handle a form submit.
And it is not blocked by cors, so I assume that this is not the real problem.
const handleSubmit = () => {
axios
.post(
`${BASE_URL}/userData/update`,
{
token: token,
newUserData
},
{
headers: {
"Content-Type": "application/json",
},
}
).then((res) => {
console.log(res);
})
.catch(function (error) {
console.log(error);
});
};