서버와의 통신을 위해 ajax나 XMLHttpRequest를 사용하다보면 CORS 에러가 나오는 경우가 종종 발생합니다.
할때마다 설정 방법이나 우회 방법을 항상 찾다보니 매번 고생하는거 같아 정리해봅니다.
CORS는 Cross-Origin Resource Sharing의 약자로 보안상의 이유로, 브라우저들은 스크립트 내에서 초기화되는 cross-origin HTTP 요청을 제한합니다. 예를 들면 다음과 같습니다.
# 사이트 도메인이 www.a.com 일 경우
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState === xhr.DONE) {
if (xhr.status === 200 || xhr.status === 201) {
console.log(xhr.responseText);
} else {
console.error(xhr.responseText);
}
}
};
xhr.open('get', 'https://www.b.com/api/v1/user/13');
xhr.send();
위 예제에서 사이트의 도메인은 www.a.com인데 Ajax를 할 경우 www.b.com처럼 다른 도메인에 보낼 경우 CORS 관련 에러가 납니다.
아래는 Same-origin이 되는 조건에 대해서 보여줍니다. (참고 : https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy)
기준 url : http://store.company.com/dir/page.html
URL | isSame | Why? |
---|---|---|
http://store.company.com/dir2/other.html | True | Path만 다르기 때문에 |
http://store.company.com/dir/inner/another.html | True | Path만 다르기 때문에 |
https://store.company.com/page.html | False | 프로토콜이 다름 |
http://store.company.com:81/dir/page.html | False | Port가 다름 |
http://news.company.com/dir/page.html | False | 호스트가 다름 |
아래는 각 브라우저에서 보여지는 에러 문구들 입니다.
Chrome
Access to XMLHttpRequest at '{target url}' from origin '{current url}' has been
blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present
on the requested resource.
Firefox
교차 출처 요청 차단: 동일 출처 정책으로 인해 {target domain}에 있는
원격 자원을 차단하였습니다. (원인: CORS 요청이 성공하지 못함)
Safari
[Error] Origin {current url} is not allowed by Access-Control-Allow-Origin.
[Error] XMLHttpRequest cannot load {target url} due to access control checks.
[Error] Failed to load resource: Origin {current url} is not a
llowed by Access-Control-Allow-Origin. (13, line 0)
IE
검색을 해보면 다음과 같은 방법들이 나옵니다.
apache
httpd.conf에서 mod_headers.c 쪽에 설정을 넣어주면 됩니다.
또는 VirualHost 부분에 넣어도 됩니다.
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
nginx
nginx.conf 파일 안에 location / 부분에 add_header로 넣어주면 됩니다.
location / {
#root html;
root e:/;
add_header 'Access-Control-Allow-Origin' '*';
index index.html index.htm;
}
AWS
S3
S3같은 경우는 권한 부분에 CORS 설정 하는 부분이 있습니다. 그곳에 다음과 같이 설정 하시면 됩니다.
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>http://www.example1.com</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
CloudFront
위 4가지를 알아보았습니다만 가장 간편하면서 명확한 방법은 4번입니다.
1, 2, 3번을 하기 전에 4번이 가능하다면 4번으로 진행하시는게 속이 편하실껍니다.