S3-액세스 제어 허용 오리진 헤더

누구나 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 구성을 참조하십시오 .

S3에서 3D HOP (javascript 3D viewer)로 3D 모델을로드하는 데 비슷한 문제가 있었지만 이상하게도 특정 파일 형식 (.nxs)만으로도 충분했습니다.

무엇 나를 위해 그것을 해결하는 것은 변경 한 AllowedHeader기본에서 Authorization에 *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>

다른 국가와 마찬가지로 먼저 S3 버킷에 CORS 구성이 있어야합니다.

<CORSConfiguration>
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod> <!-- Add this -->
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

그러나 내 경우에는 여전히 작동하지 않습니다. Chrome을 사용하고있었습니다 (아마 다른 브라우저와 동일한 문제 일 수 있음).

문제는 Chrome이 헤더 (CORS 데이터를 포함하지 않음)로 이미지를 캐싱 했기 때문에 AWS에서 변경하려고 시도한 경우에도 CORS 헤더가 보이지 않습니다.

후 크롬 캐시를 삭제하고 페이지를 다시로드 이미지가 예상 CORS 헤더가 있었다

위의 모든 답변을 시도했지만 아무것도 효과가 없었습니다. 실제로, 우리는 위의 답변에서 3 단계가 함께 작동해야합니다.

1. Flavio가 제안한대로; 버킷에 CORS 구성을 추가하십시오.

   <CORSConfiguration>
      <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
      </CORSRule>
    </CORSConfiguration>
   

2. 이미지에; crossorigin을 언급하십시오.

   <img href="abc.jpg" crossorigin="anonymous">
   

3. CDN을 사용하고 있습니까? 모든 것이 원본 서버에 제대로 연결되어 있지만 CDN을 통해 연결되지 않으면; CDN에 CORS 헤더 수락과 같은 설정이 필요하다는 의미입니다. 정확한 설정은 사용중인 CDN에 따라 다릅니다.

나는이 실에 도착했고 위의 해결책 중 어느 것도 내 사건에 적용되지 않았다. 그것은 밝혀 나는 단지에서 슬래시 제거했다 <AllowedOrigin>URL을 내 버킷의 CORS 구성에서.

실패 :

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

승 :

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

나는 이것이 누군가의 머리카락을 구하기를 바랍니다.

1. 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>
   </CORSConfiguration> 
   

2. S3는 http 요청에 Origin헤더 가있는 경우에만 CORS 헤더를 추가합니다 .

3. CloudFront 가 전달 하지 않습니다Origin 기본적으로 헤더를

   OriginCloudFront 배포에 대한 동작 설정에서 헤더 를 허용해야합니다 .

나는 다음과 같이 작성했다.

<?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>

왜 <AllowedHeader>*</AllowedHeader>작동 <AllowedHeader>Authorization</AllowedHeader>하지 않습니까?

fwuensche "answer"는 CDN을 설정하기위한 corret입니다. 이 작업을 수행하면서 MaxAgeSeconds를 제거했습니다.

<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>

최신 S3 관리 콘솔의 사용 권한 탭에서 CORS 구성을 클릭하면 기본 샘플 CORS 구성이 표시됩니다. 이 구성은 아닙니다그러나이 실제로 활성화 ! 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>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <ExposeHeader>ETag</ExposeHeader>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

경고-해킹.

S3Image를 사용하여 이미지를 표시 한 다음 가져 오기를 통해 이미지를 가져 오려고 시도하거나 이미지를 PDF에 삽입하거나 다른 처리를 수행하려는 경우 CORS 프리 플라이트 요청이 필요하지 않은 첫 번째 결과를 Chrome이 캐시한다는 경고가 표시됩니다. 그런 다음 가져 오기에 대한 프리 플라이트 OPTIONS 요청없이 동일한 리소스를 가져 오려고 시도하면 브라우저 제한으로 인해 실패합니다.

이 문제를 해결하는 또 다른 방법은 S3Image에 위에서 언급 한 '사용 자격 증명'이라는 crossorigin이 포함되어 있는지 확인하는 것입니다. S3Image를 사용하는 파일에서 (S3Image의 캐시 된 버전을 작성하는 구성 요소가 있으므로이 위치가 가장 적합합니다) S3Image의 프로토 타입 imageEl 메소드를 대체하여이 속성을 포함 시키십시오.

S3Image.prototype.imageEl = function (src, theme) {
    if (!src) {
        return null;
    }
    var selected = this.props.selected;
    var containerStyle = { position: 'relative' };
    return (React.createElement("div", { style: containerStyle, onClick: this.handleClick },
        React.createElement("img", { crossOrigin: 'use-credentials', style: theme.photoImg, src: src, onLoad: this.handleOnLoad, onError: this.handleOnError}),
        React.createElement("div", { style: selected ? theme.overlaySelected : theme.overlay })));
};

403 문제가 해결되었습니다. 얼마나 고통스러워!

<AllowedOrigin>*</AllowedOrigin>

*를 사용하면 버킷의 파일에 대한 웹 사이트 액세스 권한을 부여하기 때문에 좋은 생각이 아닙니다. 대신 버킷에서 리소스를 사용할 수있는 원본을 지정해야합니다. 일반적으로 도메인 이름은

<AllowedOrigin>https://www.example.com</AllowedOrigin>

또는 가능한 모든 하위 도메인을 포함하려는 경우 :

<AllowedOrigin>*.example.com</AllowedOrigin>

아래는 구성이며 나를 위해 일하는 것이 좋습니다. AWS S3의 문제를 해결하는 데 도움이되기를 바랍니다.

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

수락 된 답변은 효과가 있지만 리소스로 직접 이동하면 출처 간 헤더가없는 것 같습니다. 클라우드 프론트를 사용하는 경우 클라우드 프론트가 헤더없이 버전을 캐시하게되며,이 리소스를로드하는 다른 URL로 이동하면이 교차 출처 문제가 발생합니다.

CORS 설정이 도움이되지 않는 경우

구성 S3 이 올바른지 확인 하십시오. 에 버킷 이름이 잘못되었습니다 Storage.configure. 짧은 버킷 이름을 사용했는데 오류가 발생했습니다.

요청 된 리소스에 'Access-Control-Allow-Origin'헤더가 없습니다.

먼저 S3 버킷에서 CORS를 활성화하십시오. 이 코드를 지침으로 사용하십시오.

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>http://www.example1.com</AllowedOrigin>

   <AllowedMethod>PUT</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <AllowedMethod>DELETE</AllowedMethod>

   <AllowedHeader>*</AllowedHeader>
 </CORSRule>
 <CORSRule>
   <AllowedOrigin>http://www.example2.com</AllowedOrigin>

   <AllowedMethod>PUT</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <AllowedMethod>DELETE</AllowedMethod>

   <AllowedHeader>*</AllowedHeader>
 </CORSRule>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
 </CORSRule>
</CORSConfiguration>

2) 그래도 작동하지 않으면 img 태그에 "*"값을 가진 "crossorigin"을 추가하십시오. 이것을 html 파일에 넣으십시오.

  let imagenes = document.getElementsByTagName("img");
    for (let i = 0; i < imagenes.length; i++) {
      imagenes[i].setAttribute("crossorigin", "*");

가치가있는 것에 대해서는 비슷한 문제가 있습니다-특정 허용 원점을 추가하려고 할 때 (아님 *).

내가 수정해야한다는 것이 밝혀졌습니다.

<AllowedOrigin>http://mydomain:3000/</AllowedOrigin>

에

<AllowedOrigin>http://mydomain:3000</AllowedOrigin>

(URL의 마지막 슬라에 유의하십시오)

이것이 누군가를 돕기를 바랍니다.