通过反转 Nginx 上传到 S3答案

【问题标题】：Upload into S3 by reversing Nginx通过反转 Nginx 上传到 S3
【发布时间】：2021-05-27 22:37:39
【问题描述】：

我有一个 Bucket，我可以通过 NodeJS 轻松地将我的文件上传到其中。但不幸的是，我无法使用 ReactJS 直接上传我的文件。当我尝试时它返回 CORS 错误。

访问 XMLHttpRequest 在 'https://test_bucket.s3.ir-thr-at1.arvanstorage.com/temp.png?uploads' 来自原点“https://example.com”已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：它没有 HTTP ok 状态。

我问了一个问题here，但没有得到任何结果。

现在，我正在使用 Nginx 代理我的后端。是否可以通过 Nginx 直接从我的 ReactJS 代理到 S3 Bucket？

【问题讨论】：

其他帖子中的答案相同。我已经用 S3 做到了这一点。如果 Bucket 仍然是公开的，您应该修复 CORS 设置以使其正常工作。什么是处理上传部分？你有处理它的后端服务吗？或者你的 ReactJS 应用程序中真的有 API 密钥和秘密吗？
谢谢。我已经尝试了很多。您对修复 CORS 设置有什么建议？您是否直接在 React 之类的东西中进行过测试？
否 - 因为我永远不会在客户端 js 代码中与世界分享我的 API 密钥和秘密。我总是有一个后端服务为我处理上传。
正如另一个问题中的答案所述，您需要配置cors。这必须从您的 s3 服务提供商处完成。大多数主要提供商都有关于如何启用它的文档。如果您使用的提供商没有记录 CORS 设置，我建议您更换提供商
亲爱的@TimoStark 是的，你是对的。我也这样做了。但我的问题是我不能使用 axios 来上传大文件。因为网速差和axios超时。我说的对吗？

标签： reactjs nginx amazon-s3

【解决方案1】：

简短的回答。并不真地。你把事情搞混了。首先

不要与整个世界存储/共享您的 AWS API 密钥和秘密

在您的 ReactJS 应用程序中拥有 API 密钥和秘密将使其他人可以阅读！你不想要这个！相信我！

在您的情况下，我建议您使用客户端组件为您的 ReactJS 应用程序与保存您的秘密的小型轻量级后端服务通信。

使用 Express 的 ReactJS 和 NodeJS 的一个非常有用的实现是这样的： https://www.npmjs.com/package/react-s3-uploader

后端服务可以由 NGINX 代理。当然。确保可以从您的前端代码访问“sign-url”。

https://www.npmjs.com/package/react-s3-uploader#server-side

这对你有用。很确定。

【讨论】：

我到底在哪里混淆了它们？我告诉过你我是在服务器端这样做的，没关系，但不是在大文件中。有一些方法可以隐藏您的 KEY。那不是问题。还是谢谢。
您创建一个后端应用程序（如此处所述npmjs.com/package/react-s3-uploader#server-side）并将其托管在您的服务器上。如何在客户端 js 文件中“隐藏”密钥？
如果你想帮忙，请看我上面所说的。不，我不喜欢你的链接。我以另一种方式做到了（我通过 axios 将文件发送到后端，然后通过 NodeJS 将它们发送到 s3）。顺便说一句，在另一个项目中，我已经通过发送请求从后端获取了我的密钥。这样就不必将您的密钥保留在客户端。还有一次，这不是我的问题。谢谢。
知道了。只是被以下问题弄糊涂了：`我有一个桶，我可以通过 NodeJS 轻松地将我的文件上传到该桶中。但不幸的是，我无法使用 ReactJS 直接上传我的文件。当我尝试时它返回 CORS 错误。`听起来你试图直接从 react 上传文件。所以，但长话短说。单独的 Nginx 无济于事。您在哪里看到 cors 问题？从您的 FE 应用程序到您的 nodejs 应用程序的连接是否显示 cors 错误？在这种情况下，NGINX 可以提供帮助。如果你想在 NGINX 中加入功能，Lua 会为你工作。
好的。现在很清楚了。请在此处更新您的问题并分享您用于 nginx-s3-proxy 的确切配置。 s3-proxy https://test_bucket.s3.ir-thr-at1.arvanstorage.com 的 server_name 是什么？如果是这样，请将其添加到您的 s3 代理 stackoverflow.com/questions/60747209/… 的 nginx 配置中