由于跨域请求，带有 Jquery 文件上传的 Carrierwave_Direct 不会重定向

Posted 2023-03-04

【中文标题】由于跨域请求，带有 Jquery 文件上传的 Carrierwave_Direct 不会重定向

【英文标题】：Carrierwave_Direct with Jquery File Upload won't redirect due to cross-origin requests

【发布时间】：2014-01-31 18:18:33

【问题描述】：

我正在集成 Carrierwave_Direct 和 Jquery 文件上传。一切正常。文件直接上传到 S3 没有错误。但是，浏览器无法使用

等关键参数将用户重定向到新的 url

http://example.com?bucket=your_fog_directory&key=uploads%2Fguid%2Ffile.ext&etag=%22d41d8cd98f00b204e9800998ecf8427%22。

在js控制台上，错误信息是

XMLHttpRequest cannot load https://example.s3.amazonaws.com/. 
The request was redirected to 'http://example.com/users/settings?bucket=example&key=uploads…F1389525416-2-3762%2Fexample.jpg&etag=%225a44c7ba5bbe4ec867233d67e4806848%22', 
which is disallowed for cross-origin requests that require preflight.

我已经在 S3 上设置了 CORS：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>http://example.herokuapp.com</AllowedOrigin>
        <AllowedOrigin>http://localhost:3000</AllowedOrigin>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>DELETE</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
    </CORSRule>

JS代码：

$('#new_avatar_uploader').each(function()
    var form = $(this),
        progress_bar = $('#new_avatar_uploader').find('.progress-bar');

    form.fileupload(
        progressall: function (e, data) 
                var progress = parseInt(data.loaded / data.total * 100, 10);
                progress_bar.css("visibility","visible");
                progress_bar.css(
                    'width',
                    progress + '%'
                );
            ,
    );
);

请帮忙，提前谢谢。

【问题讨论】：

我遇到了同样的问题。最后你搞清楚了吗？

在carrierwave/fog中，您可以指定（强制）一个https调用“：s3_protocol =>：https”并将您对aws的调用也设置为https，您应该没问题。当我调用 http 并渲染 https（或其他方式）时，我总是得到这个

您是否尝试在 post 方法上设置 * 并查看是否有效？我可能是第一条规则中双重 allowedOrigin 的原因。另外，试着看看为什么它会重定向到 example.com..因为规则没有在任何地方提到那个 url

【参考方案1】：

也遇到了这个问题，即使在添加 rack/cors 并允许一切之后，也无法使重定向工作。相反，我最终使用了 action_status 而不是重定向。这将返回一个 XML 文档，其中包含您可以自己处理的必要信息（密钥）。

必要的更改如下。

在您的 Carrierwave 配置中：

config.use_action_status = true

设置上传器时，更改：

uploader.success_action_redirect = url

到

uploader.success_action_status = "201" # must be a string, or S3 throws errors

在您的表单中，添加：

= f.file_field :voter_file, :use_action_status => true

然后，在您的 javascript（或咖啡脚本）中：

form.fileupload
  dataType: 'xml'
  success: (retdata) ->
    # deal with the xml

希望对您有所帮助。

【参考方案2】：

这是为 Rails 应用启用 CORS 的方法：

宝石文件：

gem 'rack-cors'

config.ru（在文件底部添加）：

# ...
require 'rack/cors'
use Rack::Cors do

  allow do
    origins 'http://example.herokuapp.com'
    resource '*',
             :headers => :any,
             :methods => [:put, :post, :delete, :options, :head],
             :max_age => 0,
             :expose => :location
  end
end