Cannot find module 'XXXX' or its corresponding type declarations.のエラーについて
Vetur
Vetur とはVScodeでエラーチェックやシンタックスハイライトとかしてくれる拡張
タイトルのエラーはこの拡張から警告されている。
自分の状況
- Vue3、RailsApi、TypeScriptの環境構築していた。
- APIフォルダとフロント側フォルダの2つに分けて、VScode上で2つ表示して、開発していた。
- 別ファイルに記載していた関数は読み込めていたので、？だった。
解決
Vetur のリポジトリの Issue https://github.com/vuejs/vetur/issues/1817#issuecomment-614789578
In my case it's because I am using a multiroot workspace via 'Add Folder to Workspace'. When I take a project root into its own workspace, the problem goes away.
複数のルートフォルダをVScodeで表示するとエラーを吐くみたいなので、Vue側のフォルダだけを開くと消えた。
CORSとは
要約
CORSはサーバからもらったスクリプトをブラウザ側で実行して、同じオリジンではない、別のオリジンのサーバに対してアクセスできる仕組み。
概念のみ以下説明
ブラウザとサーバの仕組み
インターネットを使って、Chrome、FirefoxなどのWebブラウザを立ち上げて、何かしら検索すると、画面に文章、画像、動画などのデータが表示されます。ブラウザにデータを表示するには、データを保管しているサーバにアクセスする必要があります。サーバーから受け取ったデータの種類は動画、画像などもありますが、HTML、CSS、JavaScriptといったブラウザ上の画面を構成するためのスクリプトもサーバ側から受け取ります。
セキュリティの話
JavaScriptはブラウザ上で実行して、HTTPリクエストできる仕組みを持っています。そのため、悪意のあるサーバにアクセスして、そこから受け取った不正なJavaScriptをブラウザで実行され、被害を受けることがあります。例えば、ブラウザにはセッション情報というパスワードやユーザー情報を保存する仕組みがあり、そのセッション情報を抜き取られて不正ログインするなどがあります。 このような脆弱性を防ぐために受信したオリジンとは別のオリジンへのアクセスができないようになっています。
オリジンとは、「RFC 6454 - The Web Origin Concept」（IPAによる日本語訳）で定められた概念で、端的にいうとリソース自身のURLの「スキーム」「ホスト」「ポート」の3つの組み合わせを「オリジン」と呼びます。
でもアクセスできるようにしたい
CORSは別のオリジンにもアクセスできるように、サーバ側で許可する仕組みです。レスポンスにリソースの共有を許可するためのヘッダーを追加すると実現できる。
