网络::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200答案

【问题标题】：net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200网络::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200
【发布时间】：2022-03-22 16:09:52
【问题描述】：

请帮助解决这个问题。我正在使用 MERN 应用程序。在应用程序中，我使用 API 将图像上传到云端。然后我使用secure_url将图像上传到前端。它适用于本地主机，但不适用于 heroku，即图像未上传

本地主机：enter image description here

heroku：enter image description here

浏览器控制台中的响应：enter image description here

其他图片： enter image description here enter image description here

上传.js

const express = require("express");
const router = express.Router();
const cloudinary = require("cloudinary");
const { verifyTokenTeacher } = require("./verifyToken");

cloudinary.config({
  cloud_name: process.env.CLOUD_NAME,
  api_key: process.env.CLOUD_API_KEY,
  api_secret: process.env.CLOUD_API_SECRET,
});

// upload image
router.post("/upload", verifyTokenTeacher, (req, res) => {
  try {
    console.log(req.files);
    if (!req.files || Object.keys(req.files).length === 0)
      return res.status(400).json({ msg: "Fayl yuklanmangan" });

    const file = req.files.file; // oxiridagi file bu query parametr
    if (file.size > 1024 * 1024 * 2)
      return res.status(400).json({ msg: "Fayl hajmi 2mb dan kam bo'lsin" });

    // if file no image
    if (
      file.mimetype !== "image/jpeg" &&
      file.mimetype !== "image/jpg" &&
      file.mimetype !== "image/png"
    )
      return res.status(400).json({ msg: "Faqat JPEG va PNG rasm yuklang!" });

    cloudinary.v2.uploader.upload(
      file.tempFilePath,
      { folder: "test1" },
      async (err, result) => {
        if (err) {
          throw err;
        }

        return res
          .status(200)
          .json({ public_id: result.public_id, url: result.secure_url });
      }
    );
  } catch (err) {
    res.status(500).json(err.message);
  }
});

在前端使用图片网址：

<img src={question.image.url} alt="Rasm"  />

问题模型：Question.js

    const mongoose = require("mongoose");
    const questionSchema = mongoose.Schema(
      {
        title: {
          type: String,
          required: true,
        },
        themeId: {
          type: String,
          required: true,
        },
        image: {
          type: Object,
          default: null,
        },
      },
      {
        timestamps: true,
      }
    );
    
    module.exports = mongoose.model("Question", questionSchema);

创建问题路由器：questions.js

router.post("/", verifyTokenTeacher, async (req, res) => {
  try {
    await Theme.findById(req.body.themeId);
    const newQuestion = new Question(req.body);
    const savedQuestion = await newQuestion.save();
    res.status(201).json(savedQuestion);
  } catch (err) {
    res.status(500).json({ msg: err.message });
  }
});

【问题讨论】：

标签： node.js heroku mern cloudinary cross-origin-embedder-policy

【解决方案1】：

我看到你得到的错误是 “网：： ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200"

您是否尝试添加此标头以告诉客户端浏览器允许从 Cloudinary 域获取资源？

访问控制允许来源：https://res.cloudinary.com/

如果这不能解决问题，请在http://support.cloudinary.com 提交工单，我们将进行更深入的研究。

【讨论】：