net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200。

Question

请帮忙解决这个问题。 我正在使用一个 MERN 应用程序。 在应用程序中，我使用 API 将图像上传到 Cloudinary。 然后我在前端使用 secure_url 上传图像。 它在本地主机上工作，但在 Heroku 上不起作用，即图像没有被上传。

本地主机：

https://istack.dev59.com/zKW6O.webp Heroku：

https://istack.dev59.com/krdQz.webp 浏览器控制台的响应：

https://istack.dev59.com/b9jtH.webp 其他图片：

https://istack.dev59.com/WZz7X.webp https://istack.dev59.com/ZUTc8.webp upload.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);
  }
});

在前端中使用图片URL：

<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 });
  }
});

- nOybek

Answer 1

我在从Cloudinary获取图像时遇到了相同的错误。

通过在图像标签中添加crossorigin="anonymous"来解决该错误。

只需在您的img标签中添加crossorigin="anonymous"即可，例如：

<img crossorigin="anonymous" src="https://example.com/image.jpg">

这应该解决错误。

- Manish Rai

Answer 2

在我的情况下，这是由于 Cross-Origin-Embedder-Policy: require-corp 导致的（可能与另一个标头冲突，不确定是哪个）。

通过替换为 Cross-Origin-Embedder-Policy: same-origin 来修复。

- humkins

---

same-origin 不是 Cross-Origin-Embedder-Policy 头部的有效值。Cross-Origin-Embedder-Policy: unsafe-none | require-corp | credentialless（https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Embedder-Policy）在您的情况下，可能发生的情况是浏览器默认为 unsafe-none，因为它无法理解该头部的值。 - barryels

@barryels 你试过在那个页面上用这个值进行搜索吗？ - humkins

Answer 3

我看到你遇到的错误是"net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200"

请尝试添加此标头，告诉客户端浏览器可以从Cloudinary域获取资源：

Access-Control-Allow-Origin: https://res.cloudinary.com/

如果这无法解决问题，请在http://support.cloudinary.com提交工单，我们将深入研究。

- user13764453