意外的 < 在 JSON 位置 0 && 错误：缺少 S3 密钥 - MERN 应用程序、Heroku

编程问答 2022-05-30

问题描述

我在问题标题中合并了这两件事，因为我相信它们是相关的。

我有一个部署到 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}`));
});

除了添加了 upload 函数外，这条路线基本上没有改变。

无论如何，这在以下方面有效：

  • 发布 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

在 network 标签中有许多错误，他们都说

Error: Missing S3 key

该应用程序在 Heroku/production 上工作（显然没有图像功能），没有网络选项卡错误，但在本地这被破坏了。

我找到了专注于可能的代码错误和拼写错误的解决方案，但我没有做出任何解决方案。我什至将更改恢复到应用完全正常运行时。

我发现 node_modules 中以某种方式发生了建议的损坏的一个解决方案，所以我完全删除了它们并再次运行 npm i 进行重置。

没有用，所以我再试一次，但也删除了 package-lock.json。

我没有想法了。在现在与 S3 没有连接的应用程序中“缺少 S3 密钥”（我卸载了 aws-sdk 和 s3-proxy 包，并删除了代码）

解决方法

通过清除浏览器缓存历史解决了问题。

amazon-s3amazon-web-servicesherokuherokuherokuimage-uploadmern