👋
【ログイン機能】nuxtjs/proxyメモ
プロキシ/プロキシサーバとは
プロキシ(Proxy)
WEBサイトへのアクセスを直接せずに、「代役」であるプロキシを介してアクセスを行う仕組みのこと
プロキシサーバ(Proxy Server)
プロキシ機能を提供するサーバのこと
なぜプロキシを使うのか
用途は大きく以下２つ
- 会社ではインターネット・セキュリティを守るために使われる仕組みです
- 個人では通信の匿名性を高めたり、アクセス規制の回避（今回主にこれ？）に使われます
今回の用途
【具体例】プロキシを経由して規制を回避する
中国では、国策によりFacebookやGoogle、Youtubeといった海外WEBサイトへのアクセスが禁止されています。これを回避するため、中国国内から国外のプロキシが頻繁に利用されます。
規制されているFacebookやGoogleに直接アクセスせず、規制されていない海外のプロキシに対して通信するため、国内の通信制限を回避してFacebookやGoogleにアクセスできます。
プロキシの仕組み
- ブラウザにプロキシの設定（今回はnuxt）をし、GoogleなどのWEBサイトにアクセスします
- ブラウザは直接WEBサイトにアクセスせず,プロキシが代理でアクセスします
- WEBサイトはプロキシからリクエストを受け、応答をプロキシに返します
nuxtjs/proxyセットアップ
インストール
$ npm install @nuxtjs/proxy --save
nuxt.config.js ファイルを下記のように設定
nuxt.config.js
modules: [
'@nuxtjs/axios',
'@nuxtjs/proxy'
],
proxy項目を追記
api側のurlが「http://localhost:3030/api/〜」なのが前提
nuxt.config.js
proxy: {
'/api': {
target: 'http://localhost:3030',
pathRewrite: {
'^/api': '/'
}
}
},
参考
Discussion