CORS

CORS Error

cors errorは開発中に発生するエラーです.
ほとんどのAPIがデータのロードを要求する場合、面と向かっています.私もAPIを使ってウェブサイトを作成しようとした時、CORS errorに遭遇しました.

SOP - Same-Origin Policy

統合ソースポリシーは、あるソースからロードされたドキュメントまたはスクリプトが他のソースからインポートされたリソースと相互作用することを制限する重要なセキュリティ方法です.

Origin: https://www.google.com : 443

プロトコル:http://or http

ホスト:www.google.com

ポート:http Yes:443ポートor http Yes:80ポート

Originは、プロトコル、ホスト、ポートの組み合わせで構成されます.どちらかが異なる場合は、同じソースではありません.
SOPは、有害な文書を分離することによって、攻撃を受ける可能性のある経路を減らす.

CORS

SOPは、他のサイトとのリソース共有を制限するため、API呼び出しなどの他のソースのリソースを使用する場合にも制限され、これらのAPIを取得できません.
そのため、CORSが誕生した.
CORSは、追加のHTTPヘッダを使用して、あるソースで実行されるWebアプリケーションが別のソースから選択されたリソースにアクセスできるようにするブラウザメカニズムです.

Proxy server

CORSエラーを解決する方法はいくつかありますが、最も簡単なProxy Serverの例を示しています.

//packge.json
{
	dependencies: {},
  	scripts:{},
  	...
  	"proxy": "API를 가져올 URL"
}

package.jsonファイルに「proxy:」APIアドレスを入力します.

//utils.js
export const headers = {
  headers: {
    Authorization: process.env.REACT_APP_API_KEY,
    ContentType: "application/json",
  },
};

export const Proxy = window.location.hostname === "localhost" ? "" : "/proxy";

util.新しいjsファイルを作成します.
ヘッダに送信された個人API鍵をヘッダに格納するために使用される.
(サイトによってAPIの使い方が異なる場合があります.私の場合、API Key値をHeaderに入れなければ正常に動作しません.)
API URLにリクエストを送信する方法(APIキーなし)にかかわらず、「欠落または奇形のjwt」タグがないことを示すエラーメッセージ、または「認証が必要」メッセージが送信されます.
次にaxiosでデータをロードするファイルにインポートします.

import {headers, Proxy} from './util.js'

const [data, setData] = useState(null);
  const onClick = () => {
    axios
      .get(`${Proxy}/book/1`, headers)
      .then((response) => setData(response.data));
  };
  console.log(data);

Proxy Middleware

Proxy Middlewareにより、プロジェクト進行中に発生したCOSエラーを解決しました.

//src/setupProxy.js
const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    "/api",
    createProxyMiddleware({
      target: "https://test.daground.io", // api를 가져올 주소
      changeOrigin: true,
      pathRewrite: {
        "^/api": "",
      },
    })
  );
};

http-proxy-mriddlewareバージョンのアップグレードに伴い、糸をインストールする必要はなく、const { createProxyMiddleware } = require("http-proxy-middleware"); と上部に書くだけです.

import axios from "axios";

const api = axios.create({
  baseURL: "/api",
  headers: {
    "API key 이름" : "발급받은 API 키 값", // API key를 발급받았을 때 넣자. API Docs를 잘 살펴보자
    ContentType: "application/json",
  },
});

export const get = async () =>
  await api
    .get("/book/1")
    .then(({ data }) => console.log(data));
`

console.log(data)では、APIのデータがコンソールウィンドウに書き込まれます.
GETリクエストのAPIをaxiosにより適切に調整し、必要なデータを得る

注意点

HTML code statusで500404が表示された場合は、端末でサーバをシャットダウンし、yarn start、npm startを再実行します.