cors 에러 해결기

1. https://도메인주소 치면 http://ip주소로 이동되는 문제 때문에 계속 오류남

-->  mixed content 오류, https 에서 http로 요청을 보내면 발생하는 오류인데 구매한 도메인과 ssl 인증서 적용까지 다 해줬고 프록시 설정까지 했는데 더 이상 뭘 수정해야 될 지 감도 안 옴

백엔드에서는 잘못된 부분이 없었고 프론트에서 뭘 고쳤는 지 결국엔 해결이 됨

--> https://도메인주소/api 로 요청보내면 백엔드 서버로 잘 넘어감

 

2. 그랬더니만 이제 cors에러 발생

--> spring security 코드에서도 cors 설정 분명 다 해줬는데 오류남.. 

--> 검색해보니 nginx 에서도 설정을 해줘야 됐음

--> n시간동안 삽질하면서 conf파일 수정하고 재실행하고 무한반복 했는데도 오류 해결이 안 됨 .. 하.. 뭐지?

--> 이유는 프록시 설정이 nginx가 아니라 vercel을 통해서 되고 있었음 ㅋㅎㅋㅎ 

분명 가비아에서 dns 설정으로 우리 ip주소를 설정해놨고 그에 맞게 nginx 설정도 했는데 이후에 프론트 개발자분이 dns 설정을 vercel 주소로 바꿔놓으셨던 것 ...

어쩐지 nginx.conf 파일 아무리 수정해도 바뀌는 게 없더라 ...

저 Remote  Address 주소에 있는 ip주소는 뭔가 싶었고 vercel  주소인가 싶어서

nslookup 을 해줬더니 역시 버셀 주소였군

 

밑에 서버가 vercel 로 뜨고 Remote Address도 vercel ip주소로 뜨는 것을 확인 ,,

 

cors 설정 안 먹는 것에 대해 의심갔던 부분

 

그래서 가비아에서 dns 설정을 다시 서버 ip주소로 바꿔놓음

 

그러고 백 서버로 api 요청 했더니 그래도 cors에러 발생 (하 제발 ...)

 

3. 발생한 cors 에러

Access to XMLHttpRequest at 'https://도메인주소/api/main/list' from origin 'https://프론트주소' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

-->아무리 nginx에서 cors 설정을 수정하고 또 수정해도 계속  cors에러 ....  대신 희망점을 발견 한 게 cors 에러는 뜨지만 백엔드 서버 응답 response는 200 ok 가 떴다,, 희망을 찾았어 (그 전에는 308에러인가 이상한 에러뜸)

 

계속 conf 파일 수정하고 재실행하고 무한 반복 하다가 해결한 방법은 

 map $http_origin $allowed_origin {
                default "";
                "http://localhost:5173/" $http_origin;
                "https://도메인1/" $http_origin;
                "https://도메인2/" $http_origin;
        }

 

add_header 'Access-Control-Allow-Origin' $allowed_origin always;

 

이런 식으로 여러 도메인에 대해 cross origin 설정을 해주고 있었는데 이게 뭔가 제대로 적용이 안 되는 느낌이었음 

 

add_header 'Access-Control-Allow-Origin' 'https://배포된 프론트 vercel주소/' always;

 

걍 이렇게 냅다 박아버림

(여러 도메인 허용하는 건 더 찾아보면서 계속 수정해보고 테스트 해봐야할듯)

 

그랬더니  아까랑 다른 cors 에러 발생

 

4. 발생한 cors 에러

Access to XMLHttpRequest at 'https://요청한 백엔드 api 주소' from origin 'https://vercel 프론트 주소' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'https://
vercel 프론트 주소/' that is not equal to the supplied origin.

 

gpt한테 도움 요청함

이 오류는
Access-Control-Allow-Origin
헤더에 설정된 값이 실제 요청의 Origin 헤더와 일치하지 않기 때문에 발생합니다. 구체적으로는
https://vercel 프론트 주소/
(슬래시 포함)와
https://vercel 프론트 주소
(슬래시 없음) 간의 불일치가 문제를 일으키는 것으로 보입니다.

 

알고봤더니 허용할 도메인 적으면서 뒤에 /(슬래시) 를 하나 더 붙인 문제 ,,,

add_header 'Access-Control-Allow-Origin' 'https://배포된 프론트 vercel주소/' always;

 이거에서

add_header 'Access-Control-Allow-Origin' 'https://배포된 프론트 vercel주소' always;

이걸로 수정 해줌

 

그랬더니.... 또 다른 cors 에러 발생 ㅋㅋㅋ 하 제발요

 

5. 발생한 cors 에러

auth:1 Access to XMLHttpRequest at 'https://요청한 백서버 api 주소' from origin 'https://vercel 프론트 주소' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Credentials' header in the response is 'true, true' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

 

gpt한테 도움 요청함 

이 오류는 Access-Control-Allow-Credentials 헤더의 값이 잘못 설정되었기 때문에 발생합니다. Access-Control-Allow-Credentials 헤더의 값은 반드시 'true'여야 하며, 다른 값이 포함되어서는 안 됩니다.
Access-Control-Allow-Credentials 헤더가 잘못된 값을 가지고 있는 이유는 Nginx 설정이나 백엔드 서버 설정에서 중복으로 이 헤더를 추가하고 있기 때문일 수 있습니다. 이 문제를 해결하려면 Nginx 설정을 검토하고 수정해야 합니다.

 

실제로 응답값을 보니 Access-Control-Allow-Credentials : true 여기가 두번 찍히고 있었음

뭔가 의심가는 부분이

백엔드 코드 자체에서 Spring Security를 통해 Access-Control-Allow-Credentials 설정을 해주는데 nginx에서 한번 더 설정하려고 해서 중복 적용이 되는 건가 싶었음

 

    // CORS 설정 메서드
    private CorsConfigurationSource corsConfigurationSource(){
        return request -> {
            CorsConfiguration config = new CorsConfiguration();
            //config.setAllowedMethods(List.of(SwaggerPatterns));
            config.setAllowedOrigins(allowedOriginPaths);
            config.setAllowedMethods(List.of(allowedMethods));
            config.setAllowedHeaders(List.of(HttpHeaders.AUTHORIZATION, HttpHeaders.CONTENT_TYPE, HttpHeaders.SET_COOKIE, HttpHeaders.ACCEPT, HttpHeaders.ACCEPT_LANGUAGE, HttpHeaders.CONTENT_LANGUAGE));
            config.setAllowCredentials(true);
            config.setMaxAge(3600L);
            return config;
        };
    }

<security 에서 cors 설정해주는 부분>

 

 

그래서 일단 nginx에 적용되어 있던 Access-Control-Allow-Credentials 부분을 주석처리 했음

#       add_header 'Access-Control-Allow-Credentials' 'true' always;

conf 파일은 #하나만 붙여주면 주석이 됩니당

 

그러고 재실행 했더니 성공 !!!

이제 cors에러 안 뜬다 ㅠㅠㅠㅠ

 

자 이제 여러 도메인에 대해 cross origin 적용만 시키면 돼 ....

대충 80프로는 끝난 거 같다... ㅠㅅㅠ

 

 

---

 

<참고한 블로그>

https://medium.com/@hee98.09.14/nginx-cors-https-%EC%84%A4%EC%A0%95-%EB%AC%B8%EC%A0%9C-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0-5af71812f4a1

Nginx CORS + https 설정 문제 해결하기

 

(진짜 구글에 서치되는 cors 관련 에러 글들은 내가 다 눌러본듯 ㅋ...)