Question

我有一个React应用，需要将文件发布到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);
        }
    };
}

我已经看到了许多执行此操作的示例，但是它们都没有解释您需要传递给Authorization的内容。我假设它是我从Cognito获得的JWT令牌。

这是我获取JWT令牌的方式：

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

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

Answer 1

我们发现不是发送二进制文件。而是将二进制文件转换为base64。这样，您通过Amplify发送的就是计划文本。在接收端，将base64转换回二进制。对此功能进行了预先构建，使操作变得简单。

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

1 个答案: