nginx CORS 오류

프론트 팀원분께서 CORS 에러가 발생하고 있다고 연락이 왔다.

오류내용

 

 

클로드야 알려줘.

 

클라이언트 측(localhost:3000)에서 서버 측(api.polling.world)으로 요청을 보낼 때 서버에서 적절한 CORS 헤더를 설정하지 않아 브라우저가 요청을 차단한 것입니다.

 

클로드의 답변처럼 nginx 설정을 바꿔야한다.

설정파일은 여러개가 있는데

• /etc/nginx/nginx.conf
• /etc/nginx/sites-available/default
• /etc/nginx/conf.d/default.conf

 

이 중 나는 2번째 설정파일을 수정했다 ( 서버, 프록시 설정을 여기에 적었기 때문)

server {
    listen 80;
    server_name 개발한도메인;


    location / {
        # CORS 설정
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' $http_origin always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization' always;
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            add_header 'Content-Length' 0;
            return 204;
        }

        if ($request_method = 'POST') {
            add_header 'Access-Control-Allow-Origin' $http_origin always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization' always;
            add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;
        }

        if ($request_method = 'GET') {
            add_header 'Access-Control-Allow-Origin' $http_origin always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization' always;
            add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;
        }

        # 여기에 프록시 패스 설정 등 다른 필요한 설정을 추가하세요
        # 예: proxy_pass http://backend;
    }
}

 

 

이 내용을 추가해줬다. $http_origin 부분을   '*' 로 진행하면 모든 오리진에서의 요청을 허용하는 설정이다.

특정 도메인을 지정할 수도 있지만 일단 개발 단계이니 '*' 로 진행한다.

 

 

 

Ctrl + O 를 누르고 엔터를 눌러 해당 파일을 저장하고

Ctrl + X 로 나온다.

 

sudo nginx -t

sudo systemctl restart nginx

 

수정한 설정 파일에 문제가 있는지 테스트를 하고, 문제가 없다면

nginx 를 재실행 한다.

 

 

 

 

 

 

참고한 블로그

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#3._%EC%84%9C%EB%B2%84%EC%97%90%EC%84%9C_access-control-allow-origin_%ED%97%A4%EB%8D%94_%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0