React项目使用Localbase操作IndexedDB存储图片遇到CORS问题求助

问题根因 #

• Localbase 所有数据库操作均为异步逻辑，你调用的get()方法返回的是 Promise 实例，直接同步取值无法拿到存储的图片数据，导致页面刷新后初始化的预览状态为空，图片无法正常显示。
• 你贴出的 CORS 报错和 IndexedDB 读取逻辑没有关联，IndexedDB 是浏览器内置的本地存储能力，读写完全在本地完成不会发起网络请求，该报错是页面内其他第三方脚本的请求导致，不影响图片存储功能的实现。

修复方案 #

在组件初始化阶段通过异步逻辑读取 IndexedDB 中存储的图片数据，赋值给预览状态即可，修复后的完整代码如下：

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

let db = new Localbase("db");

const CardUploadImage = () => {
  const [imgPreview, setImgPreview] = useState(null);
  const [error, setError] = useState(false);

  // 组件初始化时读取本地存储的图片
  useEffect(() => {
    const getSavedImage = async () => {
      const objCardPhoto = await db.collection("cardsPhotos").doc("photo1").get();
      if (objCardPhoto?.image) {
        setImgPreview(objCardPhoto.image);
      }
    };
    getSavedImage();
  }, []);

  const handleImageChange = (e) => {
    setError(false);
    const selected = e.target.files[0];
    const ALLOWED_TYPES = ["image/png", "image/jpeg", "image/jpg"];
    if (selected && ALLOWED_TYPES.includes(selected.type)) {
      let reader = new FileReader();
      reader.onloadend = () => {
        setImgPreview(reader.result);
      };
      reader.readAsDataURL(selected);
    } else {
      setError(true);
    }
  };
  const handleSaveImage = () => {
    // 使用Localbase创建集合（'cardsPhotos'）和文档（'photo1'）
    db.collection("cardsPhotos").add(
      {
        image: imgPreview
      },
      "photo1"
    );
    alert("photo1 已通过Localbase存储到IndexedDB");
    console.log("photo1 已通过Localbase存储到IndexedDB");
  };
  const handleDeleteImg = () => {
    setImgPreview(null);
    db.collection("cardsPhotos").doc("photo1").delete();
  };
  return (
    <div  className="container">
      {error && <p className="errorMsg">不支持的文件格式</p>}
      <div
        className="imgPreview"
        style={{
          background: imgPreview
            ? `url("${imgPreview}") no-repeat center/cover`
            : "#131313"
        }}
      >
        {!imgPreview && (
          <>
            <label htmlFor="fileUpload" className="customFileUpload">
              点击上传图片
            </label>
            <input type="file" id="fileUpload" onChange={ handleImageChange } />
            <span>(支持jpg、jpeg、png格式)</span>
          </>
        )}
      </div>
      <div className="icons-card-canvas mb-5">
        <img
          className="icon-trash-canvas"
          src="/assets/images/trash.png"
          alt="删除图标"
          onClick= { handleDeleteImg }
        />
        <img
          className="icon-trash-canvas"
          src="/assets/images/Icon-download.png"
          alt="保存图标"
          onClick= { handleSaveImage }
        />
      </div>
    </div>
  );
};

export default CardUploadImage;

内容的提问来源于stack exchange，提问作者JGPcode