📝 오늘 한 것

1. CORS 에러 해결

📚 배운 것

1. 배포

1) CORS 에러

(1) 에러 내용

• 이렇게 작성하면, 일반 로그인을 하면 프로필 사진이 안 보였다. (현재 상태)
  net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200

// server.js
app.use((req, res, next) => {
  res.header("Cross-Origin-Embedder-Policy", "require-corp");
  res.header("Cross-Origin-Opener-Policy", "same-origin");
  next();
});

//- header.pug & profile.pug
if loggedInUser.socialOnly 
  img(src=loggedInUser.avatarUrl, crossorigin).profile-img

• 이렇게 작성하면, github 로그인을 하면 프로필 사진이 안 보였다. (수정 전 상태)
  ~ ~ ~ has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. GET https://avatars.githubusercontent.com/u/~ ~ ~ net::ERR_FAILED 200

// server.js
app.use((req, res, next) => {
  res.header("Cross-Origin-Embedder-Policy", "credentialless");
  res.header("Cross-Origin-Opener-Policy", "same-origin");
  next();
});

//- header.pug & profile.pug
if loggedInUser.socialOnly 
  img(src=loggedInUser.avatarUrl, crossorigin="use-credentials").profile-img

(2) 에러 해결

• Cross-Origin-Embedder-Policy: credentialless
• img crossorigin
• fetch(url, { mode: "cors" })

일반 로그인을 해도 github 로그인을 해도 프로필 사진이 모두 잘 뜬다.

app.use((req, res, next) => {
  res.header("Cross-Origin-Embedder-Policy", "credentialless");
  res.header("Cross-Origin-Opener-Policy", "same-origin");
  next();
});

//- header.pug & profile.pug
if loggedInUser.socialOnly 
  img(src=loggedInUser.avatarUrl, crossorigin).profile-img

// userController.js
export const finishGithubLogin = async (req, res) => {
  // 중략
  
  if ("access_token" in tokenRequest) {
    const { access_token } = tokenRequest;
    const apiUrl = "https://api.github.com";
    const userData = await (
      await fetch(`${apiUrl}/user`, {
        mode: "cors", // 추가 ❗
        headers: {
          Authorization: `token ${access_token}`,
        },
      })
    ).json();
    
  // 중략
};

(3) 참고 자료

교차 출처 리소스 공유 (CORS)
Making your website "cross-origin isolated" using COOP and COEP
Load cross-origin resources without CORP headers using COEP: credentialless

나흘 간 애먹였던 에러를 결국 해결했지만 기쁨보단 허무함이 더 큰 거 같다.
진짜 별의 별 걸 다 찾아서 해봤었는데 결국 이렇게 해결하다니.
credentials true 문제도 allow header 문제도 origin 문제도 전부 아니었다.
그래도 질문으로 남겨두지 않고 결국 해결해서 후련하다.

그 밖에 오늘 참고했던(삽질했던) 자료들
Contents-Type Header 와 Accept Header의 차이점
Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’
MDN - XMLHttpRequest
Using XMLHttpRequest

📝 내일 할 것

1. 처음부터 복습