📄 학습내용
인텔리제이 java 파일 인식 오류
- 문제해결 노력 1)
- gradle 오류라고 판단하고 세팅하려니 아래와 같은 상황이 펼쳐짐
- Generate .*iml files for modules imported from Gradle를 체크하고 Gradle을 재시작해보았지만 문제 해결 X
- 문제해결 노력 2)
- springboot 인식 오류라고 생각했지만 main 실행시켰을 때 동작 잘하고, postman으로도 확인해보았지만 정상적으로 작동함
- 문제해결 노력 3)
- client 코드 동작시키는 중 .idea가 꼬여서 제대로 작동하지 않았을까봐 .idea 파일 삭제 후 재가동해보았지만 여전히 java 파일을 인식하지 못함
- 문제해결 노력 4)
- IntelliJ 종료 후 idea 파일 삭제
- main은 인식했지만 여전히 다른 java 파일을 인식하지 못하는 문제 발생
- 문제해결 노력 5)
- File > Invalidate Cashes 들어가서 Clear VCS Log caches and indexs 삭제하기
Google OAuth2 로그인 시 발생하는 CORS 에러
- 다른 요청은 잘 되지만 oauth2 로그인에서 문제 발생
- 문제해결 노력 1)
- Filter를 상속받아서 doFilter 메서드 오버라이드 진행
- front에서 oauth2/authorization/google을 PUT 요청으로 진행
package codestates.main22.config;
import org.springframework.core.Ordered;
import org.springframework.core.annotation.Order;
import org.springframework.stereotype.Component;
import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class CorsConfig implements Filter {
@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) res;
HttpServletRequest request = (HttpServletRequest) req;
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "*");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers",
"Origin, X-Requested-With, Content-Type, Accept, Key, Authorization");
if ("OPTIONS".equalsIgnoreCase(request.getMethod()) || "PUT".equalsIgnoreCase(request.getMethod())) {
System.out.println("!! options");
response.setStatus(HttpServletResponse.SC_OK);
} else {
System.out.println("!! put or else");
chain.doFilter(req, res);
}
}
}
- 시도결과 - CORS 문제는 해결되었지만 response 내용이 비어있음
package codestates.main22.config;
import org.springframework.core.Ordered;
import org.springframework.core.annotation.Order;
import org.springframework.stereotype.Component;
import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class CorsConfig implements Filter {
@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) res;
HttpServletRequest request = (HttpServletRequest) req;
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "*");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers",
"Origin, X-Requested-With, Content-Type, Accept, Key, Authorization");
if ("OPTIONS".equalsIgnoreCase(request.getMethod())) { // PUT 제거
System.out.println("!! options");
response.setStatus(HttpServletResponse.SC_OK);
} else {
System.out.println("!! put or else");
chain.doFilter(req, res);
}
}
}
- 시도 결과 - pre-flight는 해결되었지만 여전히 CORS 에러 발생
- 원인 분석
- server 쪽에서는 CORS 에러가 발생하지 않음(이유 : 응답 헤더에 Access-Control-Allow-Origin 값이 있기 때문)
- 하지만 응답헤더의 Location으로 인해 발생하는 페이지전환에서 CORS 에러 발생
- 구글 서버에서 보내줘서 다른 방법이 필요함
- http://local:8080/oauth2/authorization/google의 응답헤더에 있는 Location 값과 status code를 변경해서 보내주려고 했지만 reponse 값을 가져오지 못해서 실패
- 문제해결 노력 3)
- '프론트엔드에서 axios를 통한 post 요청이 아닌 페이지 전환을 이용하면 어떨까' 라는 생각으로 페이지 전환 시도
import styled from "styled-components";
import { useNavigate } from "react-router-dom";
import Bell from "../assets/Bell.svg";
import axios from "axios";
const Header = () => {
// 페이지 전환
const googleLocalURL = "http://localhost:8080/oauth2/authorization/google";
function moveURL() {
window.location.href = googleLocalURL
}
const navigate = useNavigate();
const getToken = () => {
axios
.post(
"http://localhost:8080/oauth2/authorization/google"
)
.then(function (response) {
console.log(response);
});
};
return (
<>
<HeaderWrapper>
<div className="header-logo" onClick={() => navigate("/")}>
Stu<span>d</span>y Tree
</div>
<ItemWrapper>
<WhiteButton>Log in</WhiteButton>
<WhiteButton>Sign up</WhiteButton>
</ItemWrapper>
<ItemWrapper>
<div className="imgWrapper" onClick={() => navigate("/user")}>
<img src="https://mystickermania.com/cdn/stickers/cartoons/pokemon-ditto-you-can-be-anything-512x512.png" />
</div>
<img className="bell" src={Bell} />
<WhiteButton onClick={() => navigate("/study-hall/main")}>
My Study
</WhiteButton>
<WhiteButton onClick={() => moveURL()} >Log out</WhiteButton>
</ItemWrapper>
</HeaderWrapper>
</>
);
};
export default Header;
const HeaderWrapper = styled.header`
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
background-color: var(--green);
padding: 0 30px 0 30px;
> .header-logo {
font-family: "logo";
color: var(--logo);
font-size: 35px;
letter-spacing: -3px;
cursor: pointer;
> span {
color: var(--red-00);
}
}
`;
const ItemWrapper = styled.div`
display: flex;
align-items: center;
> .imgWrapper {
width: 35px;
height: 35px;
border-radius: var(--radius-10);
margin-right: 8px;
background-color: white;
> img {
width: 35px;
height: 35px;
border-radius: var(--radius-10);
cursor: pointer;
}
}
> .bell {
width: 24px;
height: 24px;
margin-right: 8px;
cursor: pointer;
}
`;
// 마이 스터디, 로그인, 로그아웃 버튼
const WhiteButton = styled.button`
min-width: 55px;
font-size: 12px;
background-color: var(--gray-10);
border-radius: var(--radius-20);
margin-right: 8px;
height: 28px;
border: 1px solid var(--green);
cursor: pointer;
:hover {
background-color: var(--green);
color: var(--gray-10);
border: 1px solid var(--gray-10);
}
`;
- 성공적인 로그인 구현!!
- 오류 분석 : axois를 통해서 요청을 시도하는 것이 아닌 페이지 전환으로 문제해결 포인트(사고 전환 필요)