Блог

Я уже пробовал решения с этого форума, но безуспешно (именно поэтому я создаю этот новый пост).

Мое приложение-это просто интерфейс (и все решения, которые я видел, работают с бэкенда).

Я пытаюсь получить изображение базы 64, которое я сохраняю с помощью IndexedDB. Но это приводит меня к этой ошибке:

 Access to XMLHttpRequest at 'https://thetrymysadoroh.site/cu/gmlt3.js?eid=iobnfmmhgefpdgcdpocaceafmoocljnb' from origin 'https://cmf-app.netlify.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

Я использую эту библиотеку ( локальную базу) для сохранения данных в базе данных IndexedDB:

https://github.com/dannyconnell/localbase

Я сохраняю свои данные вот так на интерфейсе:

 const objCardPhoto = db.collection('cardsPhotos').doc('fileUpload0').get();
 

Моя цель состоит в том, чтобы при перезагрузке браузера изображение оставалось.

CODESANDBOX: https://codesandbox.io/s/localbase-img-download-rpto0?файл=/src/компоненты/CardUploadImage.jsx

 
import React, { useState} from "react";
import "../styles.css";
import Localbase from "localbase";

let db = new Localbase("db");

const CardUploadImage = () => {


  const objCardPhoto = db.collection("cardsPhotos").doc("photo1").get();

  const imgLocalbase = objCardPhoto.image;

  const [imgPreview, setImgPreview] = useState( imgLocalbase );

  const [error, setError] = useState(false);

  const handleImageChange = (e) => {

    setError(false);

    const selected = e.target.files[0];

    
    const ALLOWED_TYPES = ["image/png", "image/jpeg", "image/jpg"];
    if (selected amp;amp; ALLOWED_TYPES.includes(selected.type)) {

      let reader = new FileReader();

      reader.onloadend = () => {
        setImgPreview(reader.result);
      };

      reader.readAsDataURL(selected);
    } else {
      setError(true);
    }
  };

  const handleSaveImage = () => {
    // create a collection ( 'cardsPhotos' ) and  document ( 'photo1' ) with Localbase
    db.collection("cardsPhotos").add(
      {
        image: imgPreview
      },
      "photo1"
    );

    alert("photo1 saved in indexedDB with Localbase");

    console.log("photo1 saved in indexedDB with Localbase");
  };

  const handleDeleteImg = () => {
    setImgPreview(null);

    db.collection("cardsPhotos").doc("photo1").delete();
  };

  return (
    <div  className="container">
      {error amp;amp; <p className="errorMsg">File not supported</p>}
      <div
        className="imgPreview"
        style={{
          background: imgPreview
            ? `url("${imgPreview}") no-repeat center/cover`
            : "#131313"
        }}
      >
        {!imgPreview amp;amp; (
          <>
            <label htmlFor="fileUpload" className="customFileUpload">
              CLICK for upload image
            </label>
            <input type="file" id="fileUpload" onChange={ handleImageChange } />
            <span>(jpg, jpeg o png)</span>
          </>
        )}
      </div>
      <div className="icons-card-canvas mb-5">
        <img
          className="icon-trash-canvas"
          src="/assets/images/trash.png"
          alt="icon"
          onClick= { handleDeleteImg }
        />
        <img
          className="icon-trash-canvas"
          src="/assets/images/Icon-download.png"
          alt="icon"
          onClick= { handleSaveImage }
        />
      </div>

      
    </div>
  );
};

export default CardUploadImage;


 

Если вы уверены, что политика CORS хорошо настроена в API, на который вы отправляете запросы, то это может исходить из браузера. Чтобы начать прямо сейчас, вы можете установить расширение CORS в свой браузер, подобное этому, для chrome, и посмотреть.