imgur이 뭔데?
보통 meme이나 웃긴 이미지 공유하는 커뮤니티 사이튼데, 무료에다 이미지 불러오는 속도도 빨라서 이미지 스토리지로도 많이 사용한다. 제대로 스토리지를 쓰고 싶은 사람은 S3를 쓰겠지만,,, 가볍게 테스트 용으로 쓰고 싶을 때는 또 이만한 사이트가 없다.
403 에러 뜨는 이유?
1. CORS 설정 확인
프로젝트 자체에서 크로스 도메인 리퀘스트를 차단하면 imgur 뿐만 아니라 대부분의 외부 요청이 차단되기 때문에, 다른 걸 확인하기 전에 먼저 이것부터 확인해야 한다. 관리자 도구로 <head> 내부에 아래와 같은 태그가 있는지 확인해 보자.
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
태그를 발견했다면, 아래처럼 수정해 주거나 태그 자체를 없애주면 된다.
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src example.com;">
2. 127.0.0.1을 localhost로 변경
만약에 위에 방식이 안되면, 테스트할 때 127.0.0.1을 localhost로 변경해 보자. 원인은 모르겠지만(아마 버그인 듯), imgur에서 127.0.0.1에 대한 접근을 막아놨다고 한다. localhost에서는 잘 되는 걸 보면 로컬 서버에서 사용하는 거 자체를 막아놓은 건 아닌 거 같은데,,, 내 경우에는 127.0.0.1에서만 403 에러가 뜨고 localhost에서나 실제 url에 올렸을 때는 아무 문제 없이 잘 나왔다.
참고
javascript - Imgur images returning 403
Imgur images returning 403
I've been making a react app and recently whenever I try to access images from imgur like so this.setState({ imgUrl: `https://i.imgur.com/${this.props.image.id}b.png`, imgBigUrl: `https://i.i...
stackoverflow.com
'Web' 카테고리의 다른 글
| <a> 태그에 noopener, noreferrer 사용하는 이유 (0) | 2023.10.09 |
|---|---|
| 웹 폰트(Web Font) 개념 정리 (0) | 2023.07.31 |
| Node.js 알아보기 (2) | 2023.03.03 |
| SSR과 CSR 비교하기 (0) | 2023.03.03 |
