diff --git a/docs/chapter2/section2/1_proxy.md b/docs/chapter2/section2/1_proxy.md index 9541ef53..b067be80 100644 --- a/docs/chapter2/section2/1_proxy.md +++ b/docs/chapter2/section2/1_proxy.md @@ -6,7 +6,7 @@ API へ接続するためにプロキシを設定します。 `http://localhost`にアクセスすると、`npm run dev`で起動している手元のサーバーにリクエストが飛んで、`index.html`などの静的なファイルがレスポンスとして返ってきます。 ログインや街の情報の取得などは、リモートのサーバーに送信したいわけですが、`localhost:5173`から配信されているクライアントから`localhost:8080`に対してリクエストを送ろうとするとブラウザのセキュリティ機構に制限されたりと面倒なことがあります。 これらを避けるために、`localhost:8080/*`へのリクエストを`localhost:5173/api/*`として手元のサーバーに送信し、手元のサーバーがブラウザの代わりにリモートのサーバーにリクエストを送信します。手元のサーバーは、リモートのサーバーからのレスポンスを透過的にブラウザに返却するので、ブラウザからはあたかも`localhost:5173/api/*`がレスポンスを返しているように見えます。 -このように、何らかの目的のために代理で通信するサーバーをプロキシサーバーと言い、通信を代理させることを「プロキシする」と言います。 +このように、何らかの目的のために代理で通信するサーバーをプロキシサーバーと呼び、プロキシサーバーに通信を中継させることを「プロキシを挟む」と呼びます。 参考:
[オリジン間リソース共有 (CORS) | MDN](https://developer.mozilla.org/ja/docs/Web/HTTP/CORS)
@@ -14,7 +14,6 @@ API へ接続するためにプロキシを設定します。 ::: プロジェクトルートの`vite.config.ts`というファイルの内容を、以下の内容に変更します。 -ポート番号は自分がサーバーを起動しているポート番号にしてください。 <<<@/chapter2/section2/src/1/vite.config.ts{typescript:line-numbers} @@ -23,7 +22,7 @@ VSCode の Settings から`Format on Save`にチェックを入れると、自 ::: :::info -サーバーを書き換えることにより CORS を回避できます。クライアントとサーバーをそれぞれ別のオリジンで配信する場合はこちらの方法を用いた方が良いです。 +サーバーで CORS を設定することでもブラウザが通信できるようになります。クライアントとサーバーをそれぞれ別のオリジンで配信する場合はこちらの方法を用います。 <<<@/chapter2/section2/src/1/main.go{go:line-numbers} diff --git a/docs/chapter2/section2/src/1/vite.config.ts b/docs/chapter2/section2/src/1/vite.config.ts index bd3d90a0..44f27e22 100644 --- a/docs/chapter2/section2/src/1/vite.config.ts +++ b/docs/chapter2/section2/src/1/vite.config.ts @@ -15,7 +15,7 @@ export default defineConfig({ server: { proxy: { '/api': { - target: 'http://localhost:8080', // 前回のサーバーのアドレスと自分のポートの組にする + target: 'http://localhost:8080', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '/') } diff --git a/docs/chapter2/section2/src/2/LoginPage.vue b/docs/chapter2/section2/src/2/LoginPage.vue index 19bfaaeb..3829ec27 100644 --- a/docs/chapter2/section2/src/2/LoginPage.vue +++ b/docs/chapter2/section2/src/2/LoginPage.vue @@ -4,7 +4,7 @@ import { ref } from 'vue' const username = ref('') const password = ref('') const login = () => - fetch('/api/origin', { + fetch('/api/login', { method: 'POST', headers: { 'Content-Type': 'application/json'