macOS Firefox 이미지 업로드 오류

MacOS에서 Firefox를 사용해 스크린샷/붙여넣기 방식과 이미지 업로드 방식 모두로 이미지를 업로드해 보았지만, 두 경우 모두 이미지가 업로드 중이라는 메시지가 표시됩니다:

그런 다음 이미지가 실패했다는 메시지가 표시됩니다:

(Chrome에서는 이 내용을 게시했을 때 정상적으로 작동했으며, iOS의 DiscourseHub에서도 정상적으로 작동합니다.)

MacOS에서 Firefox에서 이런 일이 발생하는 원인에 대해 어떤 생각이 있으신가요?

어떤 Firefox 버전을 사용하고 계신가요? @martin 님에게 알려주세요.

콘솔에 오류가 있나요?

(Firefox Windows 95.0.2에서 재현되지 않음)

Firefox 95.0.2 (64-bit)…(MacOS 10.14.6 사용 중)

[Uppy] [20:14:42] Failed to upload Screen Shot 2021-12-21 at 3.14.08 PM.png AwsS3/Multipart: Could not read the ETag header. This likely means CORS is not configured correctly on the S3 Bucket. See https://uppy.io/docs/aws-s3-multipart#S3-Bucket-Configuration for instructions. _vendor-0d13dafa62355d23ad44f16cc044a987.js:6349:24
    error _vendor-0d13dafa62355d23ad44f16cc044a987.js:6349
    value _vendor-0d13dafa62355d23ad44f16cc044a987.js:6917
    de _vendor-0d13dafa62355d23ad44f16cc044a987.js:6940
    me _vendor-0d13dafa62355d23ad44f16cc044a987.js:6951
    emit _vendor-0d13dafa62355d23ad44f16cc044a987.js:6311
    emit _vendor-0d13dafa62355d23ad44f16cc044a987.js:6311
    value _vendor-0d13dafa62355d23ad44f16cc044a987.js:6854
    onError _vendor-0d13dafa62355d23ad44f16cc044a987.js:6710
    Z _vendor-0d13dafa62355d23ad44f16cc044a987.js:6799
    z _vendor-0d13dafa62355d23ad44f16cc044a987.js:6770
    (Async: promise callback)
    z _vendor-0d13dafa62355d23ad44f16cc044a987.js:6770
    z _vendor-0d13dafa62355d23ad44f16cc044a987.js:6769
    (Async: promise callback)
    z _vendor-0d13dafa62355d23ad44f16cc044a987.js:6769
    F _vendor-0d13dafa62355d23ad44f16cc044a987.js:6757
    (Async: promise callback)
    F _vendor-0d13dafa62355d23ad44f16cc044a987.js:6755
    value _vendor-0d13dafa62355d23ad44f16cc044a987.js:6749
    a _vendor-0d13dafa62355d23ad44f16cc044a987.js:6716
    m _vendor-0d13dafa62355d23ad44f16cc044a987.js:6138
    value _vendor-0d13dafa62355d23ad44f16cc044a987.js:6132
    value _vendor-0d13dafa62355d23ad44f16cc044a987.js:6716
    value _vendor-0d13dafa62355d23ad44f16cc044a987.js:6709
    n _vendor-0d13dafa62355d23ad44f16cc044a987.js:6725
    value _vendor-0d13dafa62355d23ad44f16cc044a987.js:6724
    e _vendor-0d13dafa62355d23ad44f16cc044a987.js:6963
    m _vendor-0d13dafa62355d23ad44f16cc044a987.js:83
    _invoke _vendor-0d13dafa62355d23ad44f16cc044a987.js:80
    t _vendor-0d13dafa62355d23ad44f16cc044a987.js:83
    r _vendor-0d13dafa62355d23ad44f16cc044a987.js:6802
    s _vendor-0d13dafa62355d23ad44f16cc044a987.js:6804
    (Async: promise callback)
    r _vendor-0d13dafa62355d23ad44f16cc044a987.js:6802
    s _vendor-0d13dafa62355d23ad44f16cc044a987.js:6804
    (Async: promise callback)
    r _vendor-0d13dafa62355d23ad44f16cc044a987.js:6802
    s _vendor-0d13dafa62355d23ad44f16cc044a987.js:6804
    i _vendor-0d13dafa62355d23ad44f16cc044a987.js:6804
    i _vendor-0d13dafa62355d23ad44f16cc044a987.js:6803
    be _vendor-0d13dafa62355d23ad44f16cc044a987.js:6958
    value _vendor-0d13dafa62355d23ad44f16cc044a987.js:6930
    (Async: promise callback)
    value _vendor-0d13dafa62355d23ad44f16cc044a987.js:6926
    scheduledAutoProceed _vendor-0d13dafa62355d23ad44f16cc044a987.js:6948
    (Async: setTimeout handler)
    he _vendor-0d13dafa62355d23ad44f16cc044a987.js:6948
    value _vendor-0d13dafa62355d23ad44f16cc044a987.js:6870
    _addFiles _application-1b8d860fd0cc6e174f8a7abbca67d655.js:5023
    _run _vendor-0d13dafa62355d23ad44f16cc044a987.js:4034
    _join _vendor-0d13dafa62355d23ad44f16cc044a987.js:4033
    join _vendor-0d13dafa62355d23ad44f16cc044a987.js:3999
    f _vendor-0d13dafa62355d23ad44f16cc044a987.js:2870
    bind _vendor-0d13dafa62355d23ad44f16cc044a987.js:2873
    n _application-1b8d860fd0cc6e174f8a7abbca67d655.js:4565
    n _application-1b8d860fd0cc6e174f8a7abbca67d655.js:4565

확인차 여쭤보는데, 메타에서 발생하는 건가요, 아니면 본인 사이트에서 발생하는 건가요?

메타에서는 아직 내 것을 확인하지 못했습니다.

아, 그러니까 CORS 규칙이 누락되어 있어 Firefox에서만 문제가 발생하는 건가요?

다른 이미지로도 시도해 보셨나요?

제 자체 Discourse 인스턴스에서는 작동합니다.

네, 방금 데스크톱과 컴퓨터의 다른 폴더에 있는 다양한 이미지로 시도해 봤는데 동일한 응답이 나타났습니다.

조사를 진행 중인데, 이게 “잘라 붙여넣기”, “드래그 앤 드롭”, 업로드 버튼 중 하나인지, 아니면 세 가지 모두인지 확인이 필요합니다.

저는 Windows 환경에서 세 가지 경우의 수를 모두 테스트해 보았지만, 제가 우회해서 접근하고 있을 수도 있으니 표준 계정으로 다시 시도해 볼 필요가 있을 수 있습니다.

확인 차 여쭤보는데, “복붙”, “드래그 앤 드롭”, 업로드 버튼 중 하나인가요, 아니면 세 가지 모두인가요?

세 가지 모두인 것 같습니다.

혹시 테마 컴포넌트 때문에 문제가 생기고 있을 수도 있으니, 안전 모드에서 시도해 볼 수 있을까요?

안전 모드에서 세 가지 방법을 모두 시도해 봤는데도 여전히 같은 오류가 나요.

음. 방금 인코그니토 창에서 세 가지 모두를 시도해 봤는데 작동했어요. 아마도 FF의 쿠키/캐시에 문제가 있는 것 같고, 상대방 쪽의 문제는 아닌 것 같습니다.

(아래 이미지는 FF 인코그니토에서 게시된 것입니다):

AwsS3/Multipart: ETag 헤더를 읽을 수 없습니다. 이는 S3 버킷에서 CORS가 올바르게 구성되지 않았음을 의미할 가능성이 높습니다. 구성 방법은 https://uppy.io/docs/aws-s3-multipart#S3-Bucket-Configuration 을 참조하세요.

아마도 일시적인 S3 오류였을 수도 있습니다. AWS로 업로드의 일부를 업로드할 때 응답에 ETag가 반환되어야 하지만, 이를 위해 버킷에서 CORS 설정을 통해 명시적으로 활성화해야 합니다:

저는 Linux에서 95.0.2 버전으로 정상적으로 작동했습니다.

업로드의 일부(AWS)를 업로드할 때 응답으로 ETag가 반환되어야 하지만, 이는 버킷에 대한 CORS 설정을 우리가 명시적으로 활성화해야 합니다:

음, 제 환경에서도 그런 것 같습니다 (FF 스크린샷이지만 지금은 Chrome으로 업로드 중):

방금 인코그니토 창에서 세 가지 모두를 시도해 보았고, 정상적으로 작동했습니다. 아마도 FF의 쿠키/캐시에 문제가 있는 것이지, 상대방 측의 문제는 아닐 수도 있습니다.

discourse.org 쿠키를 삭제하고 FF의 고급 추적 보호를 기본적으로 꺼 놓았지만, 여전히 문제가 발생합니다. 하지만 FF 인코그니토 모드에서는 여전히 정상 작동합니다.

문제의 원인이 FF 확장 프로그램이거나 다른 것인지 확인하기 위해 제 쪽에서 계속 실험해 보겠습니다.

원인을 찾았습니다. ClearURLs FF(파이어폭스) 추가 기능이 설치되어 있었고, 이 기능에는 다음 옵션이 있습니다.

요청에서 ETag 헤더 필터링 (참고: 이 기사)

해당 설정을 비활성화하니 이제 잘 작동합니다. 아래 사진은 FF(파이어폭스) 비시크릿(비공개) 창이 아닌 일반 창에서 업로드한 것입니다.

이 문제를 디버깅하는 데 도움을 주셔서 감사합니다!

정말 좋은 지적이에요, @jimkleiber … 다시 발생하면 팀에 알려두겠습니다!

아, 괜찮아 @sam! 도와줄 수 있어서 기뻐. 그리고 이 덕분에 Discourse에서 대화가 "버그"에서 "지원"으로, 그리고 사후에 해결 가능한 유형의 토픽으로 변경되는 것이 얼마나 쉬운지 알게 되었어 :pray: