[react]CanvasはどうしてCORSに行くことができますか!!

最近の開発では,写真にラベルを付ける機能を実現した.
サーバはAWS 3、フロントエンドはlocalhost:300ポートを使用して開発されている.
getImageData()を使用して、写真の位置値を検索してタグを付けますが、このようなエラーが発生しました.

初級開発者を悩ませるCORSエラーに直面.
上記の誤りをCORS政策違反の誤りと呼ぶ.
では、CORS政策とは何か.

🤔 なぜCORS関連の話題になったのか。

関連資料

ソース間共有リソース(CORS)

MDNをまとめてみます。

CORSは、異なるソース間でリソースを伝達する方法を制御するメカニズムである.

CORSリクエストを実現するには、サーバが特定のヘッダ「アクセス制御」Allow-Originとともに応答する必要があります.

CORSポリシーに違反した場合、異なるソースで何かを要求すると、ブラウザはセキュリティ上の理由で閉じます.
たとえば、クライアントポートは3000、サーバポートは8080です.
クライアントからサーバにリソースを要求すると、CORSエラーメッセージはクライアントコンソールに赤で表示され、データは提供されません.
CORSの問題を解決するには、同じソースからリソースを要求することができます!
簡単ですよね?
ここにスプーンをもう1杯入れて、CanvasがなぜCORSエラーを起こしたのか見てみましょう.
参考資料
Allowing cross-origin use of images and canvas

Canvas를 사용할 때 CORS 승인 없이 이미지를 사용할 수는 있지만, 
이미지를 변형한 상태에서 데이터를 캔버스에서 꺼내려 한다면 
“canvas tainted” 관련 오류가 발생할 것이다.

結果は脈絡のある文章です.
ということで、CORSの解決法を見つけましたが、2種類くらい使ったので整理してみました.

1.画像のCross Origin属性を設定する

JavaScriptでは、画像自体にCross Originプロパティを設定する必要があります.

var img = new Image();
img.src = "http://other-domain.com/image.jpg";
img.crossOrigin = "Anonymous";

あまりいい方法ではないようです.

2.サーバータイトルにCross Origin属性を設定する

最も基本的な方法は、サーバにタイトルを設定することです.

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*"); // 모든 도메인
  res.header("Access-Control-Allow-Origin", "https://example.com"); // 특정 도메인
});

3.エージェントの設定

反応式ドキュメントには、プロキシ設定方法が示されている.
package.jsonにproxyを1行追加すればいい!

//package.json
{
  ...,
  "proxy": "http://apiserver.com:5000",
  ...,
}

要求は次のように処理されます.

ブラウザはreact devサーバに要求を送信する(http://localhost:3000).

React devサーバは、要求をapiサーバに送信する(http://apiserver.com:5000).

apiサーバは、react devサーバに応答を渡す.

React devサーバは、この応答をブラウザに直接渡します.
この場合、ブラウザの観点からapiサーバではなくreact devサーバが応答しているように見えます.

こうして4つの解決策が見つかった.
解決策は私が見つけたよりずっと多いですが、大体たくさん書いてあります.

に感銘を与える

ネット上で最も重要な問題を知って嬉しいです.CORSエラーがなければ、見逃します.
そして、言語の基本文法のほかに、ネットで学ぶことが多すぎると感じましたが・・・😂
ありがとうございます.🙏