경위

요 전날 학교 과제를 React를 사용하여 API 서버로 작성했습니다.
학교로서는 Java를 사용한 과제였기 때문에 어쩔 수 없이 Servlet과 Tomcat을 이용해 제작하고 있었습니다만 Fetch로 쿠키등을 취급한 인도 처리를 하는 성대하게 빠져서 4일간 정도 좌학을 사이에 두었으므로 이렇게 생각합니다.

왜 빠졌는지

이러한 형태로, 교환을 시도한 것입니다만 FetchAPI를 검색해 credentials가 자신의 머리에서는 이해를 못했기 때문에 빠져 버렸습니다.

원래 CORS는?

오리진 간 리소스 공유(CORS) - MDN web docs
CORS (Cross-Origin Resource Sharing)에 대해 정리해 보았다 - Developers.IO
Cross-Origin Resource Sharing(CORS)을 사용한 HTTP 요청

이런 좌학은 자신이 아닙니다.

동일 원천 정책을 굳이 무시하는 이상, 악의를 가진 제3자로부터의 공격을 받을 위험이 높아질 가능성이 있습니다.
이러한 상황 속에서, 보다 간편하게, 보다 안전하게 크로스 도메인 액세스를 실현하고 싶다는 요구에 응하기 위해서 만들어진 것이 CORS입니다.
Developers.IO

막히는 이야기 세키류티적으로 마즈이므로 굳이 제한을 걸어 일부 개방하는 형태로 하고 있는 것 같습니다.

HTTP 프로토콜의 헤더 정보를 다시 써야 할 것 같습니다.

실천편 Tomcat을 허용하자.

서버측

FillterServlet.java

public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
    HttpServletRequest req = (HttpServletRequest) request;
    HttpServletResponse res = (HttpServletResponse) response;
    // 許可したいドメインの追加
    res.setHeader("Access-Control-Allow-Origin", "http://192.168.44.55:3000");
    // 認証情報やCookieのやりとりをする際にはCredentialsをTrueにする必要がある。
    res.setHeader("Access-Control-Allow-Credentials","true");
    // 実行可能なHTTPメソッドの追記
0   res.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, DELETE, OPTIONS");
    // よくわからないけど追記
    res.setHeader("Access-Control-Allow-Headers", req.getHeader("Access-Control-Request-Headers"));
}

주의점
Fillter에 기술하도록 썼습니다만, 본래는 Servlet에 기재해야 할 항목입니다. (HttpServletRequest,Response 용)

클라이언트측

ajax.js

fetch(
  "URL",{
    // クロスドメインのため、modeをcorsに設定
    mode:'cors',
    // セッションなどを保持する
    credentials: "include"
    }
 }
)

credentials 설정 항목

mit: 결코 쿠키를 보내지 않는다.

same-origin : URL이 호출자의 스크립트와 동일한 오리진 인 경우에만 쿠키를 보냅니다.

include: 크로스 오리진의 호출이어도, 항상 쿠키를 송신한다.

이번에하고 싶은 것은 include에 의한 구현입니다.

여기서 빠는 포인트

내가했던 설정

FillterServlet.java

res.setHeader("Access-Control-Allow-Origin", "*");

에러 로그로 흐릅니다만 와일드 카드는 선택하면 fetch측에서 연주됩니다.
또한res.setHeader("Access-Control-Allow-Credentials","true");를 설정하고 있지 않고, 영원과 쿠키를 취득할 수 없는 채 모르고 있었습니다만, 이런 어쩔 수 없는 부분에서 빠져 있으므로 좌학은 역시 상당히 중요하다고 생각했습니다.