Uploadifive 및 Amazon s3 - Origin은 Access-Control-Allow-Origin에 의해 허용되지 않습니다.

Question

Uploadifive (Uploadify의 HTML5 버전)을 Amazon S3와 함께 사용하려고합니다. 우리는 이미 Uploadify 작업을하고 있지만, 방문자가 플래시를 사용하지 않고 Safari를 사용하기 때문에 Uploadifive도 필요합니다.

POST를하려고하는데 문제는 업로드 전 OPTIONS에서 Uploadifive 전송에 "403 Origin이 Access-Control-Allow-Origin에서 허용되지 않음"을 요청한다는 것입니다.

아마존의 CORS 규칙은 * 원점을 허용하도록 설정되어 있으므로 아마존이 요청을 거절 할 이유가 없다는 것을 알 수 있습니다 (Flash가 OPTIONS POST 전에 요청). 아마존에 관한 나의 설정에서 큰 실수를하지 않았다면, 이것이 Cross-Origin 요청에 대해 설정되지 않은 Uploadifive와 관련이 있다고 가정합니다.하지만 이것을 확인하거나 수행하는 방법에 대한 정보는 찾을 수 없습니다. 요청시 보낸 헤더를 변경하십시오.

누구나 Amazon S3에서 Uploadifive를 사용해 보았습니까?이 문제를 어떻게 해결 했습니까?

내 S3 CORS 설정 :

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

편집 : 그것이 것처럼 보이지 않도록, S : 은 --disable-웹 보안 플래그와 크롬을 테스트 한 후 나는 403을 받고 멈췄 교차 도메인 헤더를 올바르게 설정하지 않는 Uploadifive입니다. 문제는 이제 Uploadifive의 교차 도메인 설정을 어떻게 수정합니까?

Answer 1

승리!

몇 시간 동안 내 머리를 벽에 부딪 히자 두 가지 오류가 발견되었습니다.

1) 아마존 에 보내려는 가장 기본적인 것들 이상으로 모든 헤더는()AllowedHeader 태그를 통해 CORS 설정에서 지정해야합니다. 그래서이 아마존에 내 설정의 POST 부분을 변경 : Uploadifive 먼저 formData에서 "파일"필드를 추가했다

<CORSRule> 
    <AllowedOrigin>*</AllowedOrigin> 
    <AllowedMethod>POST</AllowedMethod> 
    <AllowedHeader>*</AllowedHeader> 
</CORSRule> 

2), 아마존은 마지막 필드해야합니다. 그래서 Uploadifive js를 수정하여 파일 필드를 마지막으로 추가했습니다. 1.1.1에서이 라인 393의 주위에이고 이것은 변화 :

전 :

// Add the form data 
formData.append(settings.fileObjName, file); 

// Add the rest of the formData 
for (var i in settings.formData) { 
    formData.append(i, settings.formData[i]); 
} 

후 :

// Add the rest of the formData 
for (var i in settings.formData) { 
    formData.append(i, settings.formData[i]); 
} 

// Add the form data 
formData.append(settings.fileObjName, file); 

이 나를 위해 문제를 해결했다. Uploadify가 응답을 이해할 수 있도록하기 위해 할 일이 있을지 모르지만 업로드 자체가 이제 작동하고 필요한대로 Created 201을 반환합니다.