Блог

Я пытаюсь загрузить изображение в Cloudinary со своего локального адреса (localhost: 3000). Однако, когда я пытаюсь загрузить в него изображение, оно выдает мне эту ошибку: доступ к XMLHttpRequest по адресу ‘https://api.cloudinary.com/v1_1/dz8xmxmly/image/upload » из источника «http://localhost:3000 ‘ был заблокирован политикой CORS: поле заголовка запроса x-access-token не разрешено Access-Control-Allow-Headers в предполетном ответе.Вот мой код —

 import React from "react";
import axios from "axios";
const Input = (props) => {
const uploadImage = (event) => {
const file = event.target.files[0];
const formData = new FormData();
formData.append("file", file);
formData.append("upload_preset", "lwop0fgy");
axios.post("https://api.cloudinary.com/v1_1/dz8xmxmly/image/upload", formData)
.then((response) => {
  console.log(response.data.url);
})}
return (
<>
<input  type="file" onChange = {uploadImage} />
</>
 );
 };
 export default Input;
 

Я столкнулся с теми же проблемами при написании своего первого приложения. Совместное использование ресурсов CORS — Cross Access применимо, когда вы пытаетесь получить / поместить данные из других доменов.

Предполетный запрос — запрос, который браузер делает от вашего имени на внутреннем сервере, чтобы проверить, имеете ли вы право / право выполнять операции CRUD (только для запросов put, delete, post).

В серверной Cloudinary части разрешены только запросы с определенными заголовками, которых нет в вашем post-запросе, например, Cloudinary не разрешает x-access-token , которые вы пытаетесь отправить.

Но я не уверен, откуда именно вы настраиваете заголовки в axios.

Вы можете изменить свой код на следующий

 
    axios.post("https://api.cloudinary.com/v1_1/dz8xmxmly/image/upload",formdata,{
    headers:{
       //read cloudinary documentation and write approproate headers here 
    }
    })
    .then((res)=>{
       //do something
    })
    .catch((err)=>{
      //do somehting
    })

 

Пожалуйста, обратитесь к этому сообщению для получения дополнительной информации.

 const formData = new FormData();
formData.append("file", files[0]);
formData.append("upload_preset", "sdfsfuyi");

const instance = axios.create();
instance.post("https://api.cloudinary.com/
v1_1/cloud_name/image/upload", formData)
 

Обратите внимание на const instance = axios.create();