如何解决意外的 < 在 JSON 位置 0 && 错误:缺少 S3 密钥 - MERN 应用程序、Heroku
我在问题标题中合并了这两件事,因为我相信它们是相关的。
我有一个部署到 Heroku 的 MERN + Redux 应用程序。该应用程序是供艺术家上传他的图像的,因此我使用multer将图像文件存储在app/uploads/目录中,同时将记录保存在MongoDB Atlas Cloud存储中。
这很好,但当然 Heroku 的文件存储是短暂的,所以我决定使用 S3 存储桶进行存储。
我想出了如何将图像发布到 S3 存储桶的方法,但我是通过以下方式实现的:
const express = require('express');
const router = express.Router();
const upload = require('../../middleware/upload'); <<~~ multer diskStorage
const fs = require('fs');
const AWS = require('aws-sdk');
const dotenv = require('dotenv');
dotenv.config();
// Commission model
const Commission = require('../../models/Commission');
// AWS Configuration
const ID = process.env.AWS_ACCESS_KEY_ID;
const SECRET = process.env.AWS_SECRET_ACCESS_KEY;
const BUCKET_NAME = process.env.S3_BUCKET;
const s3 = new AWS.S3({
accessKeyId: ID,secretAccessKey: SECRET
});
const uploadFile = (imagename,imagedata) => {
const fileContent = fs.readFileSync(imagedata);
const params = {
Bucket: BUCKET_NAME,Key: imagename,Body: fileContent
};
s3.upload(params,function(err,data) {
if(err) {
throw err;
}
console.log(`File uploaded to S3 successfully: ${data.Location}`)
});
};
// @route POST /commissions
// @descrip Create a new commission
// @access Private
router.route('/').post(upload.single('imageData'),authorize,(req,res) => {
uploadFile(req.body.imageName,req.file.path);
const newCommission = new Commission({
imageName: req.body.imageName,imageData: req.file.path,title: req.body.title,description: req.body.description,price: req.body.price
});
newCommission.save()
.then(commission => res.json(commission))
.catch(err => res.status(400).json(`Create new commission Failed: ${err}`));
});
无论如何,这在以下方面有效:
-
发布 mongo 文档
-
将文件保存到我的 S3 存储桶
但它实际上并没有显示我存储桶中的任何内容。我怀疑是因为在我的 app/server.js 文件中,我仍在使用:
app.use('/uploads',express.static('uploads'));
所以我安装了 s3-proxy
并且在我的 server.js 中写道:
const s3Proxy = require('s3-proxy');
app.get('/media/*',s3Proxy({
bucket: process.env.S3_BUCKET,accessKeyId: process.env.AWS_ACCESS_KEY_ID,secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,overrideCacheControl: 'max-age=100000',defaultKey: 'index.html'
}));
这……似乎什么也没做。所以我修改了 prefix
选项,把我的 S3 存储桶的 URL。
在我修修补补和几个 localhost
页面重新加载期间,我的文档突然卡在 loading
状态。
我打开了 devtools 并在 console
中读取
SyntaxError: Unexpected token < in JSON at position 0
Error: Missing S3 key
该应用程序在 Heroku/production 上工作(显然没有图像功能),没有网络选项卡错误,但在本地这被破坏了。
我找到了专注于可能的代码错误和拼写错误的解决方案,但我没有做出任何解决方案。我什至将更改恢复到应用完全正常运行时。
我发现 node_modules 中以某种方式发生了建议的损坏的一个解决方案,所以我完全删除了它们并再次运行 npm i
进行重置。
没有用,所以我再试一次,但也删除了 package-lock.json
。
我没有想法了。在现在与 S3 没有连接的应用程序中“缺少 S3 密钥”(我卸载了 aws-sdk 和 s3-proxy 包,并删除了代码)
解决方法
通过清除浏览器缓存历史解决了问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。