WebSocket 관련
WebSocket 했던 것을 한번 더 복습했다. MDN의 WebSocket 내용을 한번 쭉 읽었다. WebSocket(URL, protocol) 이렇게 만든다고 되어있었다. URL 부분은 필수고 protocol은 option 이었다. 읽어보았을 때 protocol을 다르게 하면 다른 채팅으로 연결 된다는 것 같아서 그거랑 비슷하게 코드를 새로 추가해서 해보았다.
내 예상은 처음에 연결이 되어있다가 프로토콜을 변경하면 이제 연결 안되고 혼자만 채팅쳐지는 것이었는데 그게 안 됐다... 내가 코드를 잘 못짠건지 이해를 잘 못 한건지... 다음에 한번 더 해봐야겠다.
axios 함수
saga에서는 index.js에 axios.defaults.baseURL을 지정 해주면 기본 url이 지정되었었다. 그런데 모든 http 요청을 saga에서 보내는게 아니었기 때문에 그냥 page에서 보낼 때는 _app.js에 지정해놓으면 되겠지?? 해서 지정 해놓았는데 안 되는 것이다. 그래서 axios의 baseURL을 넣어준걸 반환하는 함수를 만들어서 사용하기로 했다.
import axios from 'axios';
const customAxios = axios.create({
baseURL : ' ~~'
});
export default customAxios;이런식으로 해서 사용할 것이다!!
CORS 에러 해결
이 문제는 진짜... 거의 세시간 넘게 찾은 거 같다.
기본적인 CORS는 다 해결해놓았었다. 문제는 OPTIONS였다. OPTIONS는 몇번 들어보기만 했지 제대로 아는건 아니었기 때문에 이 문제라고 전혀 생각하지 못 하고... 한참을 찾았다.
이렇게 오래동안 걸린 이유는 일단 첫번째로는 오늘 낮까진 됐다는 것이다. 그래서 뭐가 잘 못 됐는지 찾기 어려웠다. 바뀐거는 백엔드의 스프링에서 몇몇의 api에서 jwt가 필요하면 jwt에 따라서 인증 할 수 있게 추가한 것이었고 프론트팀에 위 axios 함수랑 다른 조금의 코드...
두번째로는 postman에서는 잘 된다는 것이다. 내가 할 때도 잘 되었고 백엔드팀원이 했을 때도 postman에서 잘 되었기 때문에 잉?? 뭐지 프론트 코드 문제인가?? 라는 생각을 하게 되서 코드를 이것저것 바꿔본다고 시간을 또 한창 날렸다...
Response to preflight request dosen`t pass access control check
중요 에러는 이거였다... 근데 검색을 해도 뭔가 제대로 모르겠는 것이다.. ㅠㅠ 이것저것 다해봤는데도 안 됐고 뭐 검색한거에 OPTIONS 같은게 나와서 아 저런게 있구나 하고 넘어갔다.
그러다 아 백엔드 코드나 한번 볼까 하고 봤는데
antMatchers("/", "/api/user/login", "/api/user/find-pwd", "/api/user/find-id", "/api/user/main-page/**",
"/api/help/search-exec-loc/**", "/api/help/*/to-receive-helps", "/api/help/*/received-helps").permitAll()
.antMatchers(HttpMethod.POST, "/api/user").permitAll()
.antMatchers(HttpMethod.GET, "/api/user/*").permitAll() 막 cors나 접근 권한 설정하는 곳에 이렇게 되어있었다. 스프링은 거의 안 해봐서 제대로는 몰랐지만 되는 url은 위에 있었고 안 되는 것은 밑에 POST, GET 해서 명시 되어 있었다. 그래서 뭔가 예전에 들었던 OPTIONS가 뭐 잘 되는지 체크하려고 던져 줬던거 같은데?? 생각이 들면서.. OPTIONS 옵션을 찾아보았다.
POST 메소드로 리모트 서버의 프로토콜을 호출하면 POST만 요청하지 않는다. 동일한 주소의 OPTIONS 메소드를 먼저 요청하고 200 응답을 확인 후 POST 메쏘드를 호출한다. 이것을 Preflighted request라고 한다. POST, PUT처럼 서버 자원을 변경하는 메소드일 경우 서버 확인을 위해 OPTIONS 메소드를 사용하는 것이다. POST, PUT 메소드는 서버 자원 변경을 위해 많은 데이터를 전송할 수 있기 때문이다.
그래!! 이 문제였다. 클라이언트 쪽에서 OPTIONS 메소드를 먼저 요청했는데 이거는 통과하라고 안 되어 있어서 Preflighted request가 block 당한 것이다. 그래서 백엔드팀에게 말해서 고쳤더니 해결!!
거의 3시간 동안 진짜 삽질 해서 그런지 눈물이 날거 같았다. 되던게 안 되고... 안 되던걸 다시 고치니 기분이 좋으면서도 짜증나는 묘한...ㅎㅎㅎ
백엔드 쪽에는
.antMatchers(HttpMethod.OPTIONS, "/**").permitAll()이런 코드를 추가한 것 같다ㅎㅎ
혹시 같은 에러를 겪는 분이 계신다면 잘 해결하길 바란다. OPTIONS 메소드에 대해 공부 해볼 수 있어서 유익했던 것 같다. 앞으로는 다시 이런 실수를 안하도록 잘 기억해둬야겠다..!
