フロントエンド プロキシの分析
序文
この記事では、vue プロキシと nginx プロキシの機能と使用上の注意を簡単に紹介し、vue を使用してインターフェイスをローカルで開発および呼び出しし、オンラインでデプロイする際にフロントエンドの新進気鋭が発生する 404 混乱を解決します。記事で紹介したナレッジポイント（nginx、http-proxy、viteのソースコードなど）に興味がある方は、公式サイトに行って学んでください。
1. エージェントとは? プロキシを使用する理由
- プロキシとは何ですか?
プロキシは、特別なネットワーク サービスを介して別のネットワーク サービスにアクセスするための間接的なアクセス方法です。たとえば、外国の Web サイトに直接アクセスすることはできません。VPN のみを使用できます。つまり、プロキシを使用します。 - フロントエンドでプロキシを使用する理由
まず、次の 2 つの概念を明確にします
(1) フロントエンド アプリケーションにアクセスできるようにするには、サーバー (サーバーは nginx、nodejs、apache、tomcat など) に配置する必要があります。 Vue開発はnodejsでサービスを立ち上げることです。
(2) ブラウザの同一オリジン ポリシー (プロトコル、IP、およびポート番号が同一オリジンと同じ) により、Web サイトは ajax 非同期リクエストを同一オリジン以外のサーバーに送信すること、つまりクロスを禁止されています。 -ドメイン。
上記の 2 つの点を理解すると、ローカル開発ではサーバーのインターフェースを呼び出す必要があり、それがドメインをまたぐことがわかります。クロスドメインを解決する方法はcorsやjsonpなどいろいろありますが、どれも欠点があり、プロキシはフロントエンドがクロスドメインを解決する究極の手段です。
2. エージェントの使用
vue プロキシ構成
vuecli3 のプロキシ設定は vue.config.js->devServer->proxy で行います.vite
で構築した vue のプロキシ設定は vite.config.js->server->proxy で行います.
これらのプロキシ設定は同じです.例として vuecli3 を取り上げます。
const REQUEST_PRE = "/api"
module.exports = {
// 其他配置省略
// 本地代理配置
devServer: {
// 默认是false，可以将http://localhost:8080 变为 https://localhost:8080
https: true,
// 代理配置
proxy: {
// 简单写法
// 当访问http://localhost:80/normal/getData
// 实际上访问的是 http://localhost:80/normal/getData
"/normal"：'http://localhost:80',
"/normal":{
target: 'http://localhost:80',
ws: true, // 允许websocket代理
changeOrigin: true //允许跨域
},
// 变量写法
[REQUEST_PRE]: {
target: 'http://localhost:88',
ws: true,
changeOrigin: true
},
// 重写，当访问http://localhost:80/req/getData
// 实际上访问的是 http://localhost:8888/getData
'/req': {
target: 'http://localhost:8888',
pathRewrite: path => path.replace('/req', '/module'),
ws: true,
changeOrigin: true
},
// 试试看下面两个会被代理到哪去
'/api/normal'： 'http://localhost:8888'，
'/api/other'： 'http://localhost:8888'，
},
open: true
}
}
注 (ピット ポイント):
1. 次のバックスラッシュは一貫している必要があります. インターフェイス呼び出しには影響しませんが、プロキシ ファイルの相対パスに影響します. たとえば /
req, ターゲットは http を書く必要があります: //localhost:8888、 /req/ など、ターゲットは
http://localhost:8888/ を書き込みます。
.
たとえば、localhost:8080/api/other/getData を呼び出すと、
8888 にプロキシされます
'/api': 'http://localhost:8888',
'/api/other': 'http://localhost:88'
次の書き込み方法は 88 にプロキシします
'/api/other': 'http://localhost:88',
'/api': 'http://localhost:8888'
インターフェイス呼び出し
const REQUEST_PRE = '/api'
axios.get({
url: `${
REQUEST_PRE}/getData`
}).then(res=>{
console.log(res)
})
nginx プロキシ
フロントエンドサーバーのほとんどは現在 nginx を使用しています. Tomcat などの場合, バックエンドプロキシプレフィックスを設定する必要があります.
nginx.conf の簡単な設定は次のとおりです. プロキシはサーバー部分のみを見ます.多くのインクルードがあります。他の一般的な接頭辞があるかどうかを確認する必要があります
worker_processes 1;
error_log logs/error.log;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type text/html;
access_log logs/access.log main;
sendfile on;
keepalive_timeout 65;
gzip on;
server {
listen 80;
server_name localhost;
# 前端文件的地址，默认在nginx的html文件夹中找index.html
location / {
root html;
index index.html index.htm;
}
# 直接代理到域名
location /api/ {
proxy_pass https://www.baidu.com/;
}
# 代理前缀也可以加在域名上
location /req/ {
proxy_pass https://www.baidu.com/req/;
}
# nginx是全匹配，不会受前面的/req跟/api影响
location /req/api/ {
proxy_pass https://127.0.0.1:443/;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
location と proxy_pass の後ろのバックスラッシュには特に注意してください。間違えると 404 になります。
たとえば、localhos:8080/api/getData にアクセスする場合、
場所 /api ---- これは間違った書き方です。
実際にアクセスされるのは https://www.baidu.com//getData です。中間の
位置に追加のバックスラッシュ / api/
実際にアクセスする https://www.baidu.com/getData
proxy_pass https://www.baidu.com
実際にアクセスする https://www.baidu.com/api/getData
proxy_pass https :/ /www.baidu.com/
は実際に https://www.baidu.com/getData にアクセスしています
ps: 可刑的小知识
プロキシは単なるプロキシ インターフェイスではなく、ページを他の人の Web サイトに直接プロキシすることもできます。次に、内部ネットワークと外部ネットワークの両方からアクセスできるサーバーがあれば、会社のイントラネット上で物事をプロキシできます。
また、自分の Web サイトを他人の Web サイトに偽装することもできます。また、nginx ログで他の人のアカウント パスワードを確認できるため、フロントエンドのパスワード送信は暗号化するのが最適です。
3、404問題の位置決め
vueのproxyとnginxのproxyを簡単に理解して、バックエンドインターフェースに正しくアクセスするために注意すべきことは何ですか?
1. プレフィックスを保持しますか? ローカルの pathRewrite を記述できるかどうか、および nginx の proxy_pass 構成も対応している必要がありますか? 2. ローカルのプレフィックスは nginx の
localtion に対応していますか?
バックスラッシュ
4. サーバーの場合nginx を使用していない場合は、
バックエンドの一般的なプレフィックスは何かを尋ねることもできます
。バックエンドがデプロイされていないか、リンクが間違っている場合は、直接スプレーしてください
4. Vue プロキシのシーケンスについて
viteでもvuecliでも、ソースコードを見てみるとhttp-proxyが使われており、http-proxyはObject.keys().map()を使って設定項目をトラバースしてプロキシを起動していることがわかりますつまり、前のエージェントがそれをキャプチャした場合、より完全なエージェント プレフィックスが背後にあるかどうかは問題ではありません。
http-proxy のソース コードの一部は次のとおりです。興味がある場合は、完全なソース コードを自分で調べてください。
this.webPasses = Object.keys(web).map(function(pass) {
return web[pass];
});
ps: 最初、node_mouldes で vite のコードを直接見たところ、パッケージ化されていることがわかり (これが vite の方が速い理由です)、プロキシを書いたのは vite だと思い、github に行ってソース コードをダウンロードし、 http -proxyを使用していることがわかりましたが、まだ十分な調査が必要です