Невозможно загрузить изображения на S3 из Django backend и Nextjs frontend vercel
У меня есть сайт электронной коммерции, построенный на Django и nextjs. Ранее он размещался на хостинге, но недавно я перенес бэкенд API на AWS Lambda, а фронтенд на vercel. Я храню изображения товаров в S3. Проблема, с которой я столкнулся, заключается в том, что после переноса я не могу загрузить изображения из nextjs frontend. Я пробовал загружать изображения из postman и админ-панели Django, и это сработало. Это просто не работает из nextjs frontend.
Вот ошибка:
An error occurred (400) when calling the HeadObject operation: Bad Request
Я использую django-storages
для загрузки моих изображений на S3.
Я использую FormData для отправки изображений из frontend в backend.
функция отправки на фронтенде:
function submit() {
setIsLoading(true);
var myHeaders = new Headers();
myHeaders.append("Authorization", `Bearer ${session?.token?.access}`);
myHeaders.append("Cookie", "django_language=en");
var formdata = new FormData();
formdata.append("name", name);
formdata.append("desc", desc);
formdata.append("length", length);
formdata.append("height", height);
formdata.append("width", width);
formdata.append("measure", measurements);
formdata.append("origin", origin);
formdata.append("signed", signed);
formdata.append("reproduce", reproduce);
formdata.append("reproduce_days", reproduce_days);
formdata.append("image", img);
formdata.append("reg_price", price);
formdata.append("cat", category);
formdata.append("year", year);
formdata.append("newcat", otherCategory);
formdata.append("newsubcat", otherSubCategory);
formdata.append("newmedium", otherMedium);
formdata.append("subcat", subCategory);
formdata.append("medium", medium);
formdata.append("orientation", orientation);
formdata.append("stock_quantity", quantity);
var requestOptions = {
method: "POST",
headers: myHeaders,
body: formdata,
redirect: "follow",
};
fetch(
`${API_URL}/profile/vendor/${session?.token?.user?.id}/add-product/?curr=INR`,
requestOptions
)
.then((response) => response.text())
.then((result) => console.log(result))
.catch((error) => console.log("error", error));
}
Примечание: Моя функция Lambda и ведро S3 не находятся в одном регионе.