CORS와 JavaScript 클라이언트 문제? 아닙니다! 커스텀 API 엔드포인트를 통해 업로드할 때 client_max_body_size가 올바르게 설정되지 않았습니다

일반
1

커스텀 엔드포인트를 통해 파일을 업로드하려고 하고 있으며, 내 웹사이트에서 사용자 API를 사용 중입니다.

관리자 계정으로만 로그인할 수 있습니다.
파일 업로드를 제외한 모든 작업은 정상적으로 수행할 수 있습니다.

> [Error] Origin https://my.domain is not allowed by Access-Control-Allow-Origin.
> [Error] Fetch API cannot load https://my.domain/m/upload.json due to access control checks.
> [Error] Failed to load resource: Origin https://my.domain is not allowed by Access-Control-Allow-Origin. (upload.json, line 0)
> [Log] API-CALL-ERROR – "/m/upload.json" – TypeError: Origin https://my.domain is not allowed by Access-Control-Allow-Origin. (app.8eb0470a.chunk.js, line 1)
> TypeError: Origin https://my.domain is not allowed by Access-Control-Allow-Origin.

설정(Settings)의 CORS에 https://my.domain과 http://localhost:19006 (테스트용)을 추가했고, app.yml에 DISCOURSE_ENABLE_CORS true를 추가했습니다.

또한 app.yml의 DISCOURSE_CORS_ORIGIN에 https://my.domain을 추가해 보았지만, 이 또한 작동하지 않았습니다.

무엇을 놓치고 있는 걸까요?

2

/shared/log/rails/production.log에서 제가 볼 수 있는 유일한 내용은 Screen Shot 2020-09-16 at 14.44.02입니다.

3

요약
관련된 모든 nginx 또는 서버를 확인하세요. 제 경우를 보면 총 3곳이었습니다: 웹사이트, discourse docker, 그리고 discourse docker 내부. 업로드 시 원하는 제한 크기로 client_max_body_size를 설정해야 합니다.

저는 discourse 설정에서만 제한을 걸고 싶어서 'client_max_body_size 999m’으로 설정했습니다. 이 줄은 nginx.conf의 http 또는 server 태그 안에 추가할 수 있습니다. 저는 안전을 위해 마지막 줄에 추가하는 것을 선호합니다 :slight_smile:

자세한 설명:
하루 종일 파고들고 firefox를 다운로드하는 등 많은 시간을 보냈습니다… 웹 개발에는 firefox를 강력히 추천합니다. 업로드가 안 되던 이유는 discourse의 docker 컨테이너 내부에 있는 nginx에서 설정된 제한 때문이라는 것을 알게 되었습니다 (일부 사람은 '아니, launcher가 다시 빌드될 때 동적으로 설정되는데…'라고 말할 수 있지만, 저는 확실하게 하고 싶습니다 :slight_smile: ). 또한 docker 이미지를 호스팅하는 우리 자체의 nginx에는 제한이 설정되어 있지 않아 기본값인 'client_max_body_size 1MiB’가 적용되고 있었는데, 이는 충분하지 않았습니다 :). 이것도 변경한 후, 프론트엔드 nginx에도 가서 해당 설정을 변경해야 했습니다. 총 3곳을 변경하고, nginx에서 CORS 사전 요청(CORS pre-flight request) 관리를 위해 6시간을 보내며 조금 스트레스를 받았지만, 이제 잘 작동합니다.

2개의 좋아요