Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 当试图从 api 路由中的 s3 中提取数据时

Question

I am trying to pull a JSON file from an S3 bucket.我正在尝试从 S3 存储桶中提取一个 JSON 文件。 Below is my api route which pulls the json file:下面是我的 api 路由，它拉取了 json 文件：

const {GetObjectCommand, S3Client} = require("@aws-sdk/client-s3");
const client = new S3Client() // Pass in opts to S3 if necessary

function getObject (Bucket, Key) {
    return new Promise(async (resolve, reject) => {
        const getObjectCommand = new GetObjectCommand({ Bucket, Key })

        try {
            const response = await client.send(getObjectCommand)

            // Store all of data chunks returned from the response data stream
            // into an array then use Array#join() to use the returned contents as a String
            let responseDataChunks = []

            // Handle an error while streaming the response body
            response.Body.once('error', err => reject(err))

            // Attach a 'data' listener to add the chunks of data to our array
            // Each chunk is a Buffer instance
            response.Body.on('data', chunk => responseDataChunks.push(chunk))

            // Once the stream has no more data, join the chunks into a string and return the string
            response.Body.once('end', () => resolve(responseDataChunks.join('')))
        } catch (err) {
            // Handle the error or throw
            return reject(err)
        }
    })
}

export default async (req, res) => {
    const records = await getObject('bucket', 'file.json')
    res.statusCode = 200;
    res.json(records)
};

and below is how I am fetching the data:以下是我获取数据的方式：

fetch('/api/getRecords').then(res => res.json()).then(data => {console.log(data)})

inspecting the console I get the following errors:检查控制台我收到以下错误：

GET https://www.example.com/api/getRecords 500

and和

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

What's weird is that this only happens in my production environment.奇怪的是，这只发生在我的生产环境中。 When I go to my api route in my development environment it works perfectly.当我在我的开发环境中将 go 转到我的 api 路由时，它工作得很好。

I've logged the response from the api route in the production environment and it is returning html instead of the json file which it is supposed to be fetching from the S3 bucket.我已经在生产环境中记录了来自 api 路由的响应，它返回 html 而不是应该从 S3 存储桶中获取的 json 文件。

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width"/>
<meta charSet="utf-8"/>
<title>500: Internal Server Error</title>
<meta name="next-head-count" content="3"/>
<link rel="preload" href="/_next/static/css/0ff82fa55a0f6a71.css" as="style"/><link rel="stylesheet" href="/_next/static/css/0ff82fa55a0f6a71.css" data-n-g=""/><noscript data-n-css=""></noscript>
<script defer="" nomodule="" src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"></script>
<script src="/_next/static/chunks/webpack-f4f9fa09c58ec7ec.js" defer=""></script><script src="/_next/static/chunks/framework-bb5c596eafb42b22.js" defer=""></script>
<script src="/_next/static/chunks/main-1d8adce4d7e8417e.js" defer=""></script>
<script src="/_next/static/chunks/pages/_app-d6205651e8a6f164.js" defer=""></script>
<script src="/_next/static/chunks/pages/_error-a3f18418a2205cb8.js" defer=""></script>
<script src="/_next/static/pxh73WL611kWpBZCFSQx6/_buildManifest.js" defer=""></script>
<script src="/_next/static/pxh73WL611kWpBZCFSQx6/_ssgManifest.js" defer=""></script>
<script src="/_next/static/pxh73WL611kWpBZCFSQx6/_middlewareManifest.js" defer=""></script>

</head>

<body>

<div id="__next" data-reactroot="">
    <div style="color:#000;background:#fff;font-family:-apple-system, BlinkMacSystemFont, Roboto, &quot;Segoe UI&quot;, &quot;Fira Sans&quot;, Avenir, &quot;Helvetica Neue&quot;, &quot;Lucida Grande&quot;, sans-serif;height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center">
    <div>
    <style>body { margin: 0 }</style>
    <h1 style="display:inline-block;border-right:1px solid rgba(0, 0, 0,.3);margin:0;margin-right:20px;padding:10px 23px 10px 0;font-size:24px;font-weight:500;vertical-align:top">500</h1>
    <div style="display:inline-block;text-align:left;line-height:49px;height:49px;vertical-align:middle">
        <h2 style="font-size:14px;font-weight:normal;line-height:inherit;margin:0;padding:0">Internal Server Error<!-- -->.</h2>
</div>
</div>
</div>
</div>
<script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":500}},"page":"/_error","query":{},"buildId":"pxh73WL611kWpBZCFSQx6","nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script>

</body>
</html>

Does anyone know how to fix this?有谁知道如何解决这一问题？

Answer 1

There was an issue with my access keys in my production environment.我的生产环境中的访问密钥存在问题。 Essentially one of my lambdas was getting a permission denied error.本质上，我的一个 lambda 表达式出现了权限被拒绝的错误。 After fixing that issue the problem was resolved.解决该问题后，问题就解决了。 I could not have done it without the help of @Ermiya Eskandary没有@Ermiya Eskandary 的帮助我做不到

Answer 2

make sure you are calling the production server not the development server确保您调用的是生产服务器而不是开发服务器

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 当试图从 api 路由中的 s3 中提取数据时

问题描述

2 个解决方案

解决方案1
0 已采纳 2022-05-08 13:26:54

解决方案2
-1 2022-05-08 00:46:23

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 当试图从 api 路由中的 s3 中提取数据时

问题描述

2 个解决方案

解决方案1 0 已采纳 2022-05-08 13:26:54

解决方案2 -1 2022-05-08 00:46:23

解决方案1
0 已采纳 2022-05-08 13:26:54

解决方案2
-1 2022-05-08 00:46:23