아니 으사 양반, 로컬에서 CORS가?

오류 원인

html 파일에서 module 타입의 js import를 한 뒤, 파일 경로로 접근하니 CORS error가 난다.

Access to script at 'file:///C:/Users/블라블라블라/파일명.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

 

오류 메세지를 읽고 다시 보니, 파일 경로에는 말그대로 origin이 빠져있다. (origin = 프로토콜 + 호스트 + 포트)

- https://reeny404.tistory.com/manage/newpost/30 에서 origin은 https://reeny404.tistory.com/ 요 부분 이다.

- 파일 경로 file:///C:/Users/블라블라블라/파일명.js 을 보면 프로토콜, 호스트 모두 없다 경로만 존재한다.

 

 

 

해결 방법

일단, local 서버를 올려서 해결했다. (https://takeknowledge.tistory.com/151)

 

 

그런데 origin이 null이라면 셋팅해주면 되는거 아냐?

  CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유) 에러는 출처가 서로 다른 서버간의 리소스 공유하려고 할 때 오류가 난다. 예전에는 한 도메인 안에서 백, 프론트를 모두 구성했으나, 점점 서로 다른 도메인의 클라이언트와 API가 많아지면서 CORS 정책이 생겨났다. CORS는 출처를 알 수 없는 서버로부터의 통신을 막기위한 보안 장치에 가깝다. 브라우저에서 origin을 셋팅하는 것은 보안 장치를 우회하려는 것에 가깝다. 하지말자!

 

 

 

 

---

 글을 적기 위해 읽은 것들

- https://ko.javascript.info/fetch-crossorigin

- https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Origin

Origin - HTTP | MDN

- https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

교차 출처 리소스 공유 (CORS) - HTTP | MDN

- https://developer.mozilla.org/ko/docs/Web/HTML/Element/script#referrerpolicy

<script>: 스크립트 요소 - HTML: Hypertext Markup Language | MDN

- https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F

🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏

- https://medium.com/@lifthus531/cors%EC%97%90-%EB%8C%80%ED%95%9C-%EA%B9%8A%EC%9D%80-%EC%9D%B4%ED%95%B4-8c84c2137c83

CORS에 대한 깊은 이해

- https://docs.tosspayments.com/resources/glossary/cors

CORS(교차 출처 리소스 공유) | 토스페이먼츠 개발자센터

- https://stackoverflow.com/questions/48753917/browser-not-setting-the-origin-header-for-cross-origin-requests

Browser not setting the origin header for cross origin requests?