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({&nbsp; &nbsp; baseURL: process.env.REACT_APP_API_URL})instance.interceptors.request.use(&nbsp; &nbsp; async (config) => {&nbsp; &nbsp; &nbsp; &nbsp; const token = store.getState().auth.token&nbsp; &nbsp; &nbsp; &nbsp; if (token) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; config.headers.Authorization = `Bearer ${token}`&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; return config&nbsp; &nbsp; },&nbsp; &nbsp; (e) => {&nbsp; &nbsp; &nbsp; &nbsp; return Promise.reject(e)&nbsp; &nbsp; })export default instance当我通过身份验证时，这弄乱了我的标题。AWS 不喜欢这样。解决方案是将 Redux 操作从import api from '../api'...&nbsp;api.put(signedRequest, file, options)...至import axios from 'axios'...&nbsp;axios.put(signedRequest, file, options)...同时将其余 API 调用留在默认 API Axios 实例上。