XMLHttpRequest CROS issues when uploading(post) files to S3 from browser and redirecting to a custom url

This case is easy to understand, and I have paste enough information about the problem. Thank you for your patience. :)

There is a case that I use JQuery File Upload (UI) to upload images to AWS S3 directly from client browser, here is the post data: AWSAccessKeyId: xxxxxx, key: filename.jpg, Policy: xxxxxx, Signature: xxxxx, acl: 'private', success_action_redirect:'http://example.org/test', 'Content-Type': x.type the policy and signature are totally fine, and the image has been uploaded as well.

but there is problem when redirect to the pre-defined url http://example.org/test:

XMLHttpRequest cannot load http://ift.tt/1SayKso. 
The request was redirected to 'http://localhost:8000/test?bucket=mybucket&key=filename.jpg&etag=xxxxxxxx', 
which is disallowed for cross-origin requests that require preflight.

I paste the http request and response for http://ift.tt/1SayKso:

Request:

POST /mybucket/ HTTP/1.1
Host: s3-eu-west-1.amazonaws.com
Connection: keep-alive
Content-Length: 298856
Origin: http://localhost:8000
X-CSRF-TOKEN: H5HRwmtwCVAxIgmAvM8YL5bgayuDyyQV2UKUqnhT
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.80 Safari/537.36
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryhI9Z5605GrykYXvT
Accept: application/json, text/javascript, */*; q=0.01
Content-Disposition: attachment; filename="xxxxxxx"
Referer: http://localhost:8000/xxxxxxxx
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.8

Response:

HTTP/1.1 303 See Other
x-amz-id-2: g1VdA6dwEHl+y/C8nSTD7qzxL7gX9o3c0JV7Cj7cKYDeUPNvlrkRzaJEz4PtNFCPZhOAhA8pqzw=
x-amz-request-id: 48C7F5DB54CCEF65
Date: Thu, 29 Oct 2015 02:35:31 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT
Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
ETag: "772d776abbc1bb619d208c92d4b986c9"
Location: http://localhost:8000/test?bucket=mybucket&key=filename.jpg&etag=xxxxxxxx
Content-Length: 0
Server: AmazonS3

And for the redirect endpoint http://example.org/test, which is implemented in Laravel 5.1. Here are the relative routes:

Route::group(['prefix' => 'test'], function () {
    Route::options('/', function(){
        return response(null, 204)
            ->header('Access-Control-Allow-Origin' , '*')
            ->header('Access-Control-Allow-Credentials', 'true')
            ->header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS')
            ->header('Access-Control-Allow-Headers', 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type')
            ->header('Access-Control-Max-Age', '1728000')
            ->header('Content-Type', 'text/plain charset=UTF-8')
            ->header('Content-Length', '0');
    });
    Route::get('/', function () {
        return response('test', 200)
            ->header('Access-Control-Allow-Origin' , '*')
            ->header('Access-Control-Allow-Credentials', 'true')
            ->header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS')
            ->header('Access-Control-Allow-Headers', 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type');
    });

});

When GET http://example.org/test directly, here is the HTTP response headers:

Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type
Access-Control-Allow-Methods:POST, GET, OPTIONS
Access-Control-Allow-Origin:*
Cache-Control:no-cache
Connection:close
Content-Type:text/html; charset=UTF-8
Date:Thu, 29 Oct 2015 02:47:51 GMT
Host:localhost:8000

Any body can help me figure out where is the problem? Thanks!

via Chebli Mohamed