[TIL] 211222

📝 今日作った

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
4日間も悩んだ過ちを解決したが、虚しさは快楽よりも大きいようだ.
私は本当にいろいろなものを探して、結局このように解決しました.
証明true問題、allow header問題、原点問題はすべてではありません.
それでも問題が残らず、結局解決してくれて快適でした.
また、今日参考にした資料は
コンテンツ-タイプヘッダーと受入ヘッダーの違い
Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’
MDN - XMLHttpRequest
Using XMLHttpRequest
📝 明日やること

最初から復習