Vite はクロスドメインを解決するためにプロキシを設定します

フロントエンドプロジェクトを作成するとき、ドメイン名、ポート、またはアクセスプロトコル (HTTP と HTTPS など) に違いがある限り、バックエンド API の URL パスにアクセスするときにクロスドメインの問題が発生することがよくあります。 )、ブラウザによってブロックされ、クロスドメインとして識別されます。さらに、バックエンドのドメイン名を繰り返し記述することもよくあります。たとえば https://example.com/api/some_end_point、https://example.com/api/other_end_pointこれら 2 つのケースでは、同じ構成、つまりプロキシ構成を直接使用して解決できます。

Vite であれ Webpack であれ、これらのパッケージ化ツールはフロントエンドプロキシの設定をサポートしており、特定の URL へのアクセスを別の実際のバックエンド API アドレスに直接変換できるため、フロントエンドとバックエンドが考慮されます。同じドメイン名、プロトコル、ポートを使用するため、クロスドメインの問題が回避され、ドメイン名の退屈な繰り返しの書き込みが回避されます。

Vite プロキシの構成

ここでは、Vite の構成を例として、API リクエストのプロキシを設定する方法を説明します。Vite が作成したプロジェクトには、 vite.config.jsVite に関する設定項目を含む設定ファイルがあり、その中でエージェントを設定できます。フロントエンドプロジェクトパスがの場合、で始まる http://localhost:3000すべての API リクエストをプロキシしてに転送する必要があります。また、バックエンド API パスにはプレフィックスがないため、プレフィックスを自動的に削除する必要があります(図を参照)。次の図:/apihttp://localhost:3001/api/api

// vite.config.js

import { defineConfig } from "vite";

export default defineConfig({
  server: {
    proxy: {
      "/api": {
        target: "http://localhost:3001",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
});

その後、プロジェクトを再起動します

まとめ

フロントエンドのクロスドメインの問題は、実際にはセキュリティの問題であり、悪意のあるプログラムがバックエンドリソースを不正に取得するのを防ぐために、異なるドメイン名のサービスが相互にアクセスすることを防ぎます。開発中に、プロキシを使用してリクエストをプロキシし、ドメイン名を同じものに変更することで、交差の問題を回避できます。Vite でプロキシを設定するには、設定ファイルのプロパティ vite.config.jsを設定し、その中の設定項目を設定します。異なる API パスに従って異なるバックエンドパスを要求するように複数のプロキシを構成できます。この記事では、デモンストレーションとして1 つだけを構成しています。serverproxy/api

Vite はクロスドメインを解決するためにプロキシを設定します

Vite プロキシの構成

まとめ

おすすめ