fetchでクライアント側からTwitterAPIを叩いたときに同一生成元エラーが生じる

Question

タイトルの通りです。
エラーメッセージに従って、Access-Control-Allow-Originヘッダを設定したり、modeにcorsを設定したりしてみたのですが、同じエラーが出力されました。

うまく回避する方法はないでしょうか？

ご教授いただけますと幸いです。

fetch('https://api.twitter.com/2/users/by/username/piyo', {
      method: 'GET',
      mode: 'cors',
      headers: {
        Authorization: hoge,
        'Access-Control-Allow-Origin': '*',
      },
    }).then(response => {
      console.log(response.json());
    });

Access to fetch at 'https://api.twitter.com/2/users/by/username/piyo' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Answer 1

エラーメッセージに従って、Access-Control-Allow-Originヘッダを設定したり

Access-Control-Allow-Originヘッダは、サーバ側が設定するものです。クライアント側でセットしても何の効果もありません。

うまく回避する方法はないでしょうか？

サーバ側が処理を認めない、かつTwitter用のキーを、誰でも見られるWebに置くのは適当ではないので、クライアントサイドJavaScriptだけで対応する方法はありません。

Comments

[maskmelon]

回答くださりありがとうございます。

ユーザーがfirebase authでTwitterログインした際に取得したアクセストークンを使ってTwitterアカウントのフォロワーの情報を取得するということを実現したいのですが、サーバー側で処理をするとなるとどういった形になるのでしょうか？

度々の質問で恐縮ですが、ご教授頂けるとありがたいです。

[maskmelon]

※追記です

サーバー側に中継地点としてAPIを立てて、ユーザーからアクセストークンを受け取ったサーバーが代わりにTwitterAPIを叩くというやり方でデータを取ってくることができたのですが、これはセキュリティ的に問題があるでしょうか？
アクセストークン・シークレットはユーザー固有の情報なのでhttp通信でサーバーに送信してよいのか不安です。