react fetch 이미지 cors 문제 해결 방법 (nginx 이용)

react 내에서 fetch로 url에서 이미지를 가져와 blob으로 new File 객체를 만들어서 다루는 상황이었다.

그런데 cors 에러가 나면서 되지 않았다. 분명 server 에서 프론트 url 은 allow 처리를 해주었기에 의아했다.

그런데 생각해 보니 이미지 파일들은 nginx 에서 서버에 도달하기 전에 처리를 한다. 그러면 nginx 에서 cors 처리를 해주면 되지 않을까?

location ~* ^/.*\\.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|ttf)$ {
  proxy_cache STATIC;
  proxy_ignore_headers Cache-Control;
  proxy_cache_valid 7d;
  expires 7d;
  // 이 부분을 추가
  add_header 'Access-Control-Allow-Origin' 'https://tilnote.io';
  proxy_pass ...
}

나의 경우 정적인 파일과 이미지에 7일간의 캐시를 주어 해결하고 있었다.

이 location 블록에 특정 사이트 도메인 즉 나의 프론트 서버 도메인을 다음과 같이 추가했다.

add_header 'Access-Control-Allow-Origin' 'https://tilnote.io';

이렇게 하고 nginx를 리로드해줬다.

sudo nginx -s reload

이렇게 하니 cors 문제가 해결되었다.

정적인 파일을 nginx로 해결하고 있는 경우 참고하자.