corsの対応方法(vercel編)

2744 ワード
CORS JavaScript Vercel JavaScript テキストリンク

本記事の内容

corsとは何か、問題や原因、解決方法を記載した記事となります。
解決方法は複数あるのですが、vercelデプロイを例に解説していきます。

アジェンダ

1.結論
2.corsとは
3.解決方法
4.vercel.jsonの記載方法

1. 結論

vercel.jsonを設定
{
  "rewrites": [
    { "source":  "/dev/api/:path*",
      "destination": "https://リダイレクト先URL/dev/api/:path*"
    }
  ]
}

2. corsとは

corsとは

Cross-Origin Resource Sharingの略。ブラウザのセキュリティ機能で、同一オリジン以外でデータを取得できないようにする機能。オリジンとは、スキーム、ホスト、ポートの組み合わせ。とはいえ、オリジンってのがピンとこない人用に、オリジンが異なる例を書いておきます。まぁ簡単にいうと「情報を得られるサーバ」は一つのみってことを覚えておいてください。 
○異なるオリジン
1. スキームが異なる(httpとhttps接続の場合)
  ・http://www.example.com:8080
  ・https://www.example.com:8080
2. ホストが異なる(ドメイン名が異なる場合)
  ・https://www.example.com:8080
  ・https://www.qiita.com:8080
3. ポート番号が異なる
  ・https://www.example.com:8080
  ・https://www.example.com:8081

3.解決方法

正規の解決方法

corsの許可をフロント、サーバ共に設定する。予め許可されたサーバのため、ブラウザのセキュリティ機能から回避する。本題から逸れるので、興味のある方は下記記事をお読みください。https://qiita.com/att55/items/2154a8aad8bf1409db2b

ブラウザに誤認識させる解決策

corsは「情報を得られるサーバ」は一つじゃないとブラウザが許可しないよってものでした。
だから、ブラウザに情報を得る先を一つのみだと誤認識させてあげればいいのです。
え、何を言ってるかって、簡単にいうと静的ファイルのホスティング先でリダイレクトするのです。
詳しくは下記画像を見て読み解いてね！！！

vercelの設定方法

vercel.jsonを作成し、リダイレクト先のURLを変更するのです。 
{
  "rewrites": [
    { "source":  "/dev/api/:path*",
      "destination": "https://リダイレクト先URL/dev/api/:path*"
    }
  ]
}

フロントでのfetchの書き方
/dev/api/testのアクセスを送る場合、https://リダイレクト先URL/dev/api/testに送信されます。

fetch('/dev/api/test')
  .then(response => response.json())
  .then(data => console.log(data));