Laravel + Plupload 上传到 S3 响应以进行预检无效 - CORS

Posted 2023-03-04

【中文标题】Laravel + Plupload 上传到 S3 响应以进行预检无效 - CORS

【英文标题】：Laravel+Plupload uploading to S3 response for preflight is invalid - CORS

【发布时间】：2016-03-04 07:41:05

【问题描述】：

我正在 nginx 服务器上测试将 plupload 上传到 S3。 整个项目基于 Laravel。

问题是当我开始上传时，Chrome 的控制台显示：

XMLHttpRequest cannot load http://BUCKET.s3.amazonaws.com/. Response for preflight is invalid (redirect)

我尝试使用 php 标头启用 CORS，但仍然出现错误。

当前上传脚本：

<?php
$bucket = 'BUCKET';
$accessKeyId = '***************';
$secret = '********************************************';

$policy = base64_encode(json_encode(array(
        'expiration' => date('Y-m-d\TH:i:s.000\Z', strtotime('+1 day')),
        'conditions' => array(
                array('bucket' => $bucket),
                array('acl' => 'public-read'),
                array('starts-with', '$key', ''),
                array('starts-with', '$Content-Type', ''),
                array('starts-with', '$name', ''),
                array('starts-with', '$Filename', ''),
        )
)));

$signature = base64_encode(hash_hmac('sha1', $policy, $secret, true));
?>
....
<div id="uploader"></div>
....    
    <script>
        $(function () 
            $("#uploader").plupload(
                runtimes: 'html5',
                url: 'http://<?php echo $bucket; ?>.s3.amazonaws.com/',

                multipart: true,
                multipart_params: 
                    'key': '$filename',
                    'Filename': '$filename',
                    'acl': 'public-read',
                    'Content-Type': 'image/jpeg',
                    'AWSAccessKeyId': '<?php echo $accessKeyId; ?>',
                    'policy': '<?php echo $policy; ?>',
                    'signature': '<?php echo $signature; ?>'
                ,

                file_data_name: 'file',
                filters: 
                    max_file_size: '10mb',
                    prevent_duplicates: true,
                    mime_types: [
                        title: "Image files", extensions: "jpg,jpeg"
                    ]
                
            );
        );
    </script>
....

我检查了this 以在 Nginx 上启用 CORS，但事实是，当我将 sn-p 放在我的 location / 上时，它只会在我打开 URL 时返回 404。 p>

我的 Nginx 站点配置文件：

server 
    listen 80;
    server_name myserver.com;
    root /usr/share/nginx/myserver/public;

    index index.html index.htm index.php;

    charset utf-8;

    location / 
        try_files $uri $uri/ /index.php?$query_string;
    

    location = /favicon.ico  access_log off; log_not_found off; 
    location = /robots.txt   access_log off; log_not_found off; 

    access_log off;
    error_log  /var/log/nginx/myapp-error.log error;

    sendfile off;

    client_max_body_size 100m;

    location ~ \.php$ 
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass unix:/var/run/php5-fpm.sock;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_intercept_errors off;
        fastcgi_buffer_size 16k;
        fastcgi_buffers 4 16k;
    

    location ~ /\.ht 
        deny all;
    

非常感谢

【参考方案1】：

也许值得你看看 Barryvdh 的 cors 包：

https://github.com/barryvdh/laravel-cors

这解决了我的 CORS 问题。

【讨论】：

不工作，可能不是 100% 兼容 Laravel 5.1

【参考方案2】：

我找到了一种很糟糕的方法。深入研究http://laravel.com/docs/master/filesystem，我没有找到让 Plupload 工作的有效答案。否则，我发现一个糟糕的解决方案是使用：

<input type="file" name="files[]" multiple>

并使用类似的东西：

foreach($request->file("files") as $file) 
        Storage::put(
            'test'.rand(1,100),
            file_get_contents($file->getRealPath())
        );
    ;

在我的控制器中，可以将多个文件上传到 S3。但它不是异步的，而且它的用户体验更差。

我将继续努力最终启用 Plupload。我会在这里发布更新。