net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200
请帮我解决这个问题。我正在使用一个MERN应用程序。在应用程序中，我使用API将图像上传到云端。然后，我使用secure_url将图片上传到前端。它在本地主机上工作，但在heroku上不起作用，即图像没有上载。
本地主机：在这里输入图像描述
heroku：在这里输入图像描述
浏览器控制台中的响应：在这里输入图像描述
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 });
}
});回答 3
Stack Overflow用户
发布于 2022-06-09 14:25:04
在从cloudinary获取图像时，我也得到了同样的错误。
我通过在图像标记中添加crossorigin="anonymous"来解决错误。
只需在img标记中添加crossorigin="anonymous"，如下所示：
<img crossorigin="anonymous" src="https://example.com/image.jpg">这将解决错误。
Stack Overflow用户
发布于 2022-09-06 13:36:31
在我的例子中，它是由Cross-Origin-Embedder-Policy: require-corp引起的(可能与另一个标头发生冲突，不确定是哪个头)。
用Cross-Origin-Embedder-Policy: same-origin代替。
Stack Overflow用户
发布于 2022-01-13 21:19:33
我看到您得到的错误是"net:：ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200“
您会尝试添加这个头来告诉客户端浏览器允许它从Cloudinary域获取资源吗？
访问-控制-允许-起源：https://res.cloudinary.com/
如果这不能解决这个问题，请在http://support.cloudinary.com提交一张票，我们将进行更深入的研究。
https://stackoverflow.com/questions/70695881
复制相似问题
腾讯云开发者
