S3图像上传组件在私有路由页面上失败，但不是公共页面

Question

我创建了一个图像上传组件，它将一张图像上传到 S3。完全相同的组件适用于一个页面（DevPage在 AppRouter 中），而不是另一个（Dashboard在 AppRouter 中的页面）。从仪表板（私人）页面尝试时，错误如下：xhr.js:178 PUT https://<domain>.s3.amazonaws.com/dummyCo/images/5eb9927c5e23ef001719395f/48da9506-dc13-465a-b3f5-928334d33f47?AWSAccessKeyId=<redacted>&Content-Type=png&Expires=1593609319&Signature=<redacted>-amz-acl=public-read 400 (Bad Request)image (S3) upload error Error: Request failed with status code 400    at createError (createError.js:16)    at settle (settle.js:17)    at XMLHttpRequest.handleLoad (xhr.js:61)但是在 DevPage 上运行时，它是成功的。我完全困惑 - 请帮忙！负责将图像上传到 S3 的行。dispatch(uploadImage(uploadInput.files[0], dummyObsId, dummyCompany))当它呈现在公共路由页面上时，它可以工作，但不能在私有路由页面上。AppRouter.js（为简洁起见，删除了一些路线）

Answer 1

解决了！

我不得不使用 Axios 的“裸”版本向 S3 发出 put 请求。

我之前使用的是在我的 API 文件中声明的 Axios 实例......

import axios from 'axios'

import store from '../redux/store'

const instance = axios.create({

    baseURL: process.env.REACT_APP_API_URL

})

instance.interceptors.request.use(

    async (config) => {

        const token = store.getState().auth.token

        if (token) {

            config.headers.Authorization = `Bearer ${token}`

        }

        return config

    },

    (e) => {

        return Promise.reject(e)

    }

)

export default instance

当我通过身份验证时，这弄乱了我的标题。AWS 不喜欢这样。

解决方案是将 Redux 操作从

import api from '../api'

...

 api.put(signedRequest, file, options)

...

至

import axios from 'axios'

...

 axios.put(signedRequest, file, options)

...

同时将其余 API 调用留在默认 API Axios 实例上。