时间戳

首页 > 解决方案 > 将 Cognito 授权附加到 axios 发布请求

reactjs - 将 Cognito 授权附加到 axios 发布请求

问题描述

我有一个需要将文件发布到 API 网关的反应应用程序。react 应用程序通过 Cognito 对用户进行身份验证，API 网关需要身份验证。

在这里的任何帮助将不胜感激！最初我尝试使用 Amplify 为您管理所有授权，但显然它不会传递二进制数据，因此我使用 Axios。

但是我收到以下错误消息：

授权标头中不是有效的键=值对（缺少等号）：'eyJra ....'

uploadfile = async (event) => {
    let file = event.target.files[0];
    let reader = new FileReader();
    reader.readAsArrayBuffer(file);
    reader.onload = async () => {
        try
        {
            let request = {
            method: 'POST',
            url: 'https://XXXXXXXXXX.execute-api.us-east-1.amazonaws.com/dev/upload',
            headers: {
                'Content-Type': 'image/png',
                //'Authorization': 'Bearer ' + this.props.JWT,
                'Authorization': this.props.JWT,
            },
            data: reader.result          
            };
            return axios(request); 
        }
        catch(e)
        {
            console.log(e);
        }
    };
}

我已经看到了许多这样做的例子，但没有一个解释你需要传递给授权的内容。我假设它是我从 Cognito 获得的 JWT 令牌。

这就是我获得 JWT 令牌的方式：

let res = await Auth.currentSession();
const info = await Auth.currentUserInfo();
let accessToken = res.getAccessToken();
let jwt = accessToken.getJwtToken();

如您所见，我还将 Bearer 添加到 JWT 令牌中，但它不起作用。

标签： reactjsaws-api-gatewayamazon-cognito

解决方案

我们想出的不是发送二进制文件。而是将二进制文件转换为 base64。这样，您通过 Amplify 发送的内容就是计划文本。在接收端，您将 base64 转换回二进制。为此在功能上进行了预建，这很简单。

推荐阅读