我有一个问题，我想将图像从服务器渲染到客户端应用程序，但它没有渲染，如果我尝试直接从浏览器访问网址，我会得到一个白色/空白页面，但我不这样做不知道错误是否在于提供静态文件，我正在使用 ExpressJs 和 React。下面是代码
const corsOption = {
origin: "http://localhost:5173",
optionSuccessStatus: 200,
};
app.use(cors(corsOption));
app.use("/images", express.static(path.resolve(__dirname, "images")));
这是我的multer配置文件
import multer from "multer";
import path from "path";
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, "images");
},
filename: function (req, file, cb) {
cb(
null,
`${file.fieldname}-${Date.now()}${path.extname(file.originalname)}`
);
},
});
const fileFilter = (req, file, cb) => {
const filetypes = /jpg|jpeg|png|mp4|mov|avi/;
const extname = filetypes.test(path.extname(file.originalname).toLowerCase());
const mimetype = filetypes.test(file.mimetype);
if (mimetype && extname) {
return cb(null, true);
} else {
cb(new Error("Only .jpg, .jpeg, .png, .mp4, and .avi files are allowed"));
}
};
const upload = multer({
storage: storage,
fileFilter: fileFilter,
limits: {
fileSize: 1024 * 1024 * 5,
},
});
export default upload;
这是我使用 localhost:5173/images/profilePicture-59745.jpeg 发送获取请求时得到的响应
<!doctype html>
<html lang="en">
<head>
<script type="module">
import RefreshRuntime from "/@react-refresh"
RefreshRuntime.injectIntoGlobalHook(window)
window.$RefreshReg$ = () => {}
window.$RefreshSig$ = () => (type) => type
window.__vite_plugin_react_preamble_installed__ = true
</script>
<script type="module" src="/@vite/client"></script>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx?t=1717276169250"></script>
</body>
</html>
看起来内容类型是text/html，有人可以帮我解决这个问题吗？
我相信
http://localhost:5173CORS要从服务器访问静态文件，实际上需要使用服务器的 URL 来访问它。假设您的网络服务器正在侦听端口
3000http://localhost:3000/images/<IMAGE_NAME>filename如果客户端应用程序托管在同一后端服务器上，那么您应该确保静态中间件位于客户端应用程序中间件之前。