오류 blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. / Failed to load resource: net::ERR_FAILED

파일 업로드를 uploads를 서버가 아닌 AWS S3 버킷으로 바꾸려고 했고

multerS3를사용하여 storage를 변경해준 결과 갑자기 괴랄한 오류가뜨면서 나를 방해하기 시작했다.

 

일단 내가 heroku를 통해 배포한 웹사이트에서 AWS의 S3에 올려놓은 리소스(업로드한 파일)를 가져오려면 CORS 위반으로 자료를 가져올 수 없다고한다. 그냥 안된다. 

 

이를 해결하려면 AWS에서 파일을 가져가는 것을 허용할 수 있게끔 설정을 해줘야한다.

AWS S3 버킷에 있는 파일을 내 웹사이트로 가져오려고 요청(request)할 때, 요청헤더 (request header)에 Origin 프로퍼티에 내 사이트 주소를 담아서 보낸다.

그리고 요청을 받은 AWS 측에서는 응답헤더(response header)에 Access-Control-Allow-Origin 프로퍼티에 리소스를 가져갈 수 있도록 허용하는 사이트를 담아서 보낸다.

내 웹사이트에서 응답을 받고나면 요청 헤더의 origin 프로퍼티 값과 응답 헤더의 access-control-allow-origin 프로퍼티의 값을 비교하고 access-control-allow-origin 프로퍼티에 내 사이트(출처)가 없다면 파일을 받아올 수가 없다.

 

이 때 blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. / Failed to load resource: net::ERR_FAILED 이 오류가 발생한다.

 

이를 해결하기 위해선 AWS CORS에 "AllowedOrigins"값에 내 웹사이트의 주소를 넣어서 허용해줘야한다.

AWS S3 버킷에 권한에 들어가서 맨아래의 CORS에

아래와 같이 적어준다. 

[ { "AllowedHeaders": [ "*" ], "AllowedMethods": [ "GET", "PUT", "POST", "DELETE" ], "AllowedOrigins": [ "웹사이트주소" ], "ExposeHeaders": [] } ]

 

이랬을 때 또 발생한 오류가 있다.

ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep

전에 webassembly를 사용하고 FFmpeg를 실행시켰을 때

아래와와 같은 미들웨어를 만들어 준 적이 있었다. 이 미들웨어를 사용하지 않으면 FFmpeg모듈 사용시 문제가 발생해서 녹화기능을 사용할 수 없었다. 다운이 안됨.

server.use(
(req, res, next) => 
{ res.header("Cross-Origin-Embedder-Policy", "require-corp"); 
  res.header("Cross-Origin-Opener-Policy", "same-origin");
  next(); });

이때 그냥 아무 생각 없이 적어주고 그런갑다 하면서 넘겼는데 한번 더 생각하게 될 날이 올 줄이야..

이 미들웨어를 지워주면 저 에러가 사라진다.

 

근데 지우면 ?? FFmpeg를 사용할 수가 없음.. 

 

 

이를 해결하기 위해서 img나 video에 crossorigin을 적어주면 해결이 된다.

img(src="", crossorigin) video(src="", crossorigin)

 

 

근데 mobile에선 안된다..왜지.... 추가적으로 한번 더 생각해보아야 할 것 같다....