누구나 Access-Control-Allow-Origin응답 헤더 에 추가 했습니까 ? 내가 필요한 것은 다음과 같습니다.
<img src="http://360assets.s3.amazonaws.com/tours/8b16734d-336c-48c7-95c4-3a93fa023a57/1_AU_COM_180212_Areitbahn_Hahnkoplift_Bergstation.tiles/l2_f_0101.jpg" />이 get 요청은 response, header, Access-Control-Allow-Origin: *
버킷의 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>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>예상대로 Origin응답 헤더 가 없습니다 .
답변
일반적으로 버킷 속성에서 “CORS 구성 추가”만하면됩니다.
<CORSConfiguration>일부 기본값 이 제공됩니다. 그것이 당신의 문제를 해결하는 데 필요한 전부입니다. “저장”을 클릭하고 다시 작동하는지 확인하십시오. 그렇지 않으면 대부분의 사람들에게 효과가있는 것으로 보이는 아래 코드 (alxrb answer에서)를 시도 할 수도 있습니다.
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration> 자세한 내용은 버킷 권한 편집 에 대한이 기사를 참조하십시오 .
답변
버킷 속성에서 ‘CORS 구성 추가’를 클릭하면 웹 글꼴로드와 비슷한 문제가 발생했습니다.이 코드는 이미 있습니다.
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration> 방금 저장을 클릭하고 간결하게 작업했으며 사용자 정의 웹 글꼴이 IE 및 Firefox에서로드되었습니다. 나는 이것에 대해 전문가가 아니며, 이것이 이것이 당신을 도울 것이라고 생각했습니다.
답변
요청이 Origin헤더를 지정하지 않으면 S3는 응답에 CORS 헤더를 포함하지 않습니다. CORS를 테스트하기 위해 파일을 컬링하려고했지만 컬에 포함되지 않았기 때문에 이것은 실제로 나를 던졌습니다 Origin.
답변
@jordanstephens는 이것을 코멘트로 말했지만, 길을 잃었고 정말 쉬운 해결책이었습니다.
HEAD 방법을 추가하고 저장을 클릭하면 작동하기 시작했습니다.
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod> <!-- Add this -->
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>답변
이 작업을 수행하는 간단한 방법입니다.
나는 이것이 오래된 질문이라는 것을 알고 있지만 여전히 해결책을 찾기가 어렵습니다.
우선 Rails 4, Paperclip 4, CamanJS, Heroku 및 AWS S3로 빌드 한 프로젝트에서 저에게 도움이되었습니다.
crossorigin: "anonymous"매개 변수를 사용하여 이미지를 요청해야합니다 .
<img href="your-remote-image.jpg" crossorigin="anonymous">
AWS S3에서 CORS에 사이트 URL을 추가하십시오. 여기 아마존에 대한 언급이 있습니다. 버킷으로 이동 한 다음 오른쪽의 탭에서 ” 속성 ” 을 선택하고 ” 권한 탭을 연 다음” 편집 CORS 구성 “을 클릭하십시오 .
원래는로
< AllowedOrigin>설정했습니다*. 그냥 URL에 그 별표 (*)를 변경 할 수 있는지와 같은 옵션을 포함http://하고https://별도의 라인을. 별표가 “모두”를 허용 할 것으로 기대했지만 분명히 그보다 더 구체적이어야합니다.
이것이 나를 찾는 방법입니다.
답변
위의 답변을 참조하십시오. (그러나 크롬 버그도있었습니다)
CHROME 페이지에 이미지를로드하여 표시하지 마십시오. (나중에 새 인스턴스를 작성하려는 경우)
내 경우에는 이미지를로드하고 페이지에 표시했습니다. 클릭하면 새 인스턴스를 만들었습니다.
// there is already an html <img /> on the page, I'm creating a new one now
img = $('<img crossorigin />')[0]
img.onload = function(){
context.drawImage(img, 0, 0)
context.getImageData(0,0,w,h)
}
img.src = 'http://s3.amazonaws.com/my/image.png'; // I added arbitrary ?crossorigin to change the URL of this to fix it
Chrome은 이미 다른 버전을 캐시 했으며 표시된 이미지 crossorigin에서 사용하더라도 버전 을 다시 가져 오려고 시도 하지 않았습니다 crossorigin.
수정 하기 위해 캔버스에로드 할 때 ?crossorigin이미지 URL의 끝에 추가 했습니다 (그러나 ?blah캐시 상태를 변경하는 것은 임의적입니다).
답변
위의 답변에 위의 내용을 추가하여 문제를 해결했습니다.
CORS 오리진 헤더를 향하도록 AWS / CloudFront 배포 지점을 설정하려면 배포 지점의 편집 인터페이스를 클릭하십시오.
동작 탭으로 이동하여 “선택된 요청 헤더에 따른 캐시”를 없음에서 화이트리스트로 변경하여 동작을 편집 한 다음 Origin화이트리스트 상자에 추가 하십시오 . 자세한 내용 은 AWS Docs에서 CORS 설정을 존중하도록 CloudFront 구성을 참조하십시오 .
