파피루스

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

Today I Learned/in dev

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

떼굴펜 2024. 5. 7. 17:57

오류 원인

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

Origin request 헤더는 fetch가 시작되는 위치입니다. 경로 정보는 포함하지 않고 서버 이름만 포함합니다. POST requests에 포함되는 것처럼, CORS requests 와 함께 전송합니다. Referer 헤더와 비슷하지만, ori

developer.mozilla.org

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

 

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

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라

developer.mozilla.org

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

 

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

HTML <script> 요소는 데이터와 실행 가능한 코드를 문서에 포함할 때 사용하며 보통 JavaScript 코드와 함께 씁니다. WebGL의 GLSL 셰이더 프로그래밍 언어, JSON 등 다른 언어와도 사용할 수 있습니다.

developer.mozilla.org

- 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 개념 & 해결법 - 정리 끝판왕 👏

악명 높은 CORS 에러 메세지 웹 개발을 하다보면 반드시 마주치는 멍멍 같은 에러가 바로 CORS 이다. 웹 개발의 신입 신고식이라고 할 정도로, CORS는 누구나 한 번 정도는 겪게 된다고 해도 과언이

inpa.tistory.com

- 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에 대한 깊은 이해

Cross-Origin Resource Sharing의 의미, 목적 그리고 정확한 작동 원리

medium.com

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

 

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

CORS를 번역하면 “교차 출처 리소스 공유”에요. ‘두 출처가 서로 다르다’는 뜻인데요. CORS를 설정한다는 건 ‘출처가 다른 서버 간의 리소스 공유’를 허용한다는 거죠.

docs.tosspayments.com

- 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?

I have a simple index.html file. This html is loading from localhost:3000 <body> <h1>Some app</h1> <script src="http://localhost:3005/script.js"></script> <...

stackoverflow.com