Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

第2章2回の修正 #92

Merged
merged 4 commits into from
Apr 12, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions docs/chapter2/section2/1_proxy.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,14 @@ API へ接続するためにプロキシを設定します。
`http://localhost`にアクセスすると、`npm run dev`で起動している手元のサーバーにリクエストが飛んで、`index.html`などの静的なファイルがレスポンスとして返ってきます。
ログインや街の情報の取得などは、リモートのサーバーに送信したいわけですが、`localhost:5173`から配信されているクライアントから`localhost:8080`に対してリクエストを送ろうとするとブラウザのセキュリティ機構に制限されたりと面倒なことがあります。
これらを避けるために、`localhost:8080/*`へのリクエストを`localhost:5173/api/*`として手元のサーバーに送信し、手元のサーバーがブラウザの代わりにリモートのサーバーにリクエストを送信します。手元のサーバーは、リモートのサーバーからのレスポンスを透過的にブラウザに返却するので、ブラウザからはあたかも`localhost:5173/api/*`がレスポンスを返しているように見えます。
このように、何らかの目的のために代理で通信するサーバーをプロキシサーバーと言い、通信を代理させることを「プロキシする」と言います
このように、何らかの目的のために代理で通信するサーバーをプロキシサーバーと呼び、プロキシサーバーに通信を中継させることを「プロキシを挟む」と呼びます

参考:<br>
[オリジン間リソース共有 (CORS) | MDN](https://developer.mozilla.org/ja/docs/Web/HTTP/CORS)<br>
[プロキシ | Wikipedia](https://ja.wikipedia.org/wiki/%E3%83%97%E3%83%AD%E3%82%AD%E3%82%B7)
:::

プロジェクトルートの`vite.config.ts`というファイルの内容を、以下の内容に変更します。
ポート番号は自分がサーバーを起動しているポート番号にしてください。

<<<@/chapter2/section2/src/1/vite.config.ts{typescript:line-numbers}

Expand All @@ -23,7 +22,7 @@ VSCode の Settings から`Format on Save`にチェックを入れると、自
:::

:::info
サーバーを書き換えることにより CORS を回避できます。クライアントとサーバーをそれぞれ別のオリジンで配信する場合はこちらの方法を用いた方が良いです
サーバーで CORS を設定することでもブラウザが通信できるようになります。クライアントとサーバーをそれぞれ別のオリジンで配信する場合はこちらの方法を用います

<<<@/chapter2/section2/src/1/main.go{go:line-numbers}

Expand Down
2 changes: 1 addition & 1 deletion docs/chapter2/section2/src/1/vite.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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/, '/')
}
Expand Down
2 changes: 1 addition & 1 deletion docs/chapter2/section2/src/2/LoginPage.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { ref } from 'vue'
const username = ref<string>('')
const password = ref<string>('')
const login = () =>
fetch('/api/origin', {
fetch('/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
Expand Down