将视频上传到前端的预签名URL

Question

我已经使用我的后端代码生成了预先设计的URL，然后使用该URL上传了一个在会话期间录制的视频。我在前端使用下面的代码(React JS)来上传视频，预检似乎失败了，因为403禁止，post请求失败了，因为cors错误。请查看以下详细信息:

使用的代码：

static async uploadVideoToS3(url, body) {
        try {
            const myHeaders = new Headers({ 'Content-Type': 'video/mp4', 'mode': 'no-cors' });
            const response = fetch(url, {
                method: 'POST',
                headers: myHeaders,
                body: body
            });
            return response;
        } catch (error) {
            toast(error);
            console.log(error);
        }
    } 

控制台错误：访问“获取时间”https://xxxxxxxxxx“起源”http://localhost:5000'已被CORS策略阻止：对飞行前请求的响应未通过访问控制检查：请求的资源上不存在“访问控制允许源”标头。如果不透明响应满足您的需求，请将请求的模式设置为“无cors”，以获取禁用cors的资源。

注意：将预先签名的URL更改为xxxxxxxxxx以避免泄露此处帖子中的详细信息。

问题是我在本地主机上运行所有这些吗？还是AWS S3存储桶上的CORS配置导致了此问题？或者我的请求中是否缺少任何标题？

我发现一个帖子也有类似的问题:上传到S3时得到403(禁止的),带有一个签名的URL，OP回应说问题已经解决，但他们从未提到解决方案。

Answer 1

我也这么认为，当我试图从本地访问URL时，安全主机（HTTP）上没有提供服务，这是导致问题的原因。因此，我在开发环境中部署了应用程序，但遇到了相同的问题。经过一些研究，我能够解决这个问题。似乎我需要修改S3 Bucket的CORS配置，我试图从中生成预签名URL。

在生成预签名的URL之前，我添加了下面这段代码，它更改了S3桶的CORS配置，因为我也是从本地访问它，所以我现在将允许的来源设为*但在进入生产之前，我会将其更改为prod URL。

//passing AWS credentials            
BasicAWSCredentials awsCreds = new BasicAWSCredentials(accessKey, secretKey);
            
            AmazonS3 s3Client = AmazonS3ClientBuilder.standard()
                    .withCredentials(new AWSStaticCredentialsProvider(awsCreds))
                    .withRegion(clientRegion)
                    .build();
//Creating CORS List to update the CORS Configuration
                List<String> allowedHeaders=new ArrayList<String>();  
                allowedHeaders.add("*");
                
                List<AllowedMethods> allowedMethods=new ArrayList<AllowedMethods>();  
                allowedMethods.add(0, AllowedMethods.GET);
                allowedMethods.add(1, AllowedMethods.PUT);
                
                List<String> allowedOrigins=new ArrayList<String>();  
                allowedOrigins.add("*");
                
                List<String> exposedHeaders=new ArrayList<String>();  
                exposedHeaders.add("GET");
                exposedHeaders.add("PUT");
                
                CORSRule cors = new CORSRule();
                cors.setAllowedHeaders(allowedHeaders);
                cors.setAllowedMethods(allowedMethods);
                cors.setAllowedOrigins(allowedOrigins);
                cors.setExposedHeaders(exposedHeaders);
                cors.setMaxAgeSeconds(3600);
                
                //Assigning CORS List to CORS Configuration
                BucketCrossOriginConfiguration CORSConfiguration = new BucketCrossOriginConfiguration();
                CORSConfiguration.withRules(cors);
                
                //Updating CORS Configuration
                s3Client.setBucketCrossOriginConfiguration(bucketName, CORSConfiguration);

或者，您也可以从前端/其他语言修改CORS，参考：Javascript：https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#putBucketCors-其他语言的属性：https://docs.aws.amazon.com/AmazonS3/latest/API/API_PutBucketCors.html#API_PutBucketCors_SeeAlso

Answer 2

尝试将代理添加到package.json文件并添加您发送请求的服务器的url，在您的情况下localhost:5000

< code > " proxy ":" http://localhost:5000 "

然后使用＜code＞npm start

const res = fetch('https://localhost:5000/api/user')

然后改变它，像下面这样做

const res = fetch('/api/user')

如果上述解决方案不起作用，那么您的后端可能存在问题。