目次
1. リバースプロキシコード (問題あり)
接口封装
export function GetCardNum() {
return request({
url: '/mon_archive_cabinet_RFID/api/GetCardNum'
})
}
代理配置
// webpack-dev-server 相关配置
devServer: {
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
open: true, // 自动打开浏览器
proxy: {
// ...
'/api': {
ws: false, // proxy websockets
target: 'http://192.168.0.42:9151',
pathRewrite: {
'^/api': '' },
},
// ...
'/mon_archive_cabinet': {
target: 'http://192.168.0.26:9577',
},
'/mon_archive_cabinet_RFID': {
// 【主要代码】代理代码
target: 'http://localhost:5001',
pathRewrite: {
'^/mon_archive_cabinet_RFID': '' }
},
'/': {
target: 'http://192.168.0.42:9000'
}
}
},
質問
インターフェース404
2. トラブルシューティングの理由
【トラブルシューティング手順】
- 考えてみてください
反向代理的真实地址。まずインターフェイスのリクエスト アドレスがどこにあるのかを確認し、次にそれがプロキシの問題か他の問題なのかを確認する必要があります。- 実アドレスビュー:プロキシ設定に
logLevel: 'debug'設定を追加すると、要求されたアドレスのプロキシアドレスを端末に出力できますが、これを追加しても無駄で、端末は何も出力しません。- 2 機能しない場合は、プロキシの実際のアドレスを確認する他の方法を見つけます。 [構成] の
onProxyResリクエスト ヘッダーにプロキシ構成を追加してx-real-url1、実際のリクエスト アドレスを表示します。
- 見つかったプロキシアドレスは[質問1]
/apiのプロキシアドレスですhttp://192.168.0.42:9151- [問題 1 の解決策]
/apiエージェントを次のように変更します^/api(変更の理由については、以下の問題 1 の説明を参照してください)。/mon_archive_cabinet代理人の住所が再び代理人の住所に変わっていたことが判明【質問2】
- [問題 2 の解決策] インターフェイス リクエスト アドレスのプレフィックスを
/mon_archive_cabinet_RFIDに変更し/RFID(つまり、インターフェイス リクエスト アドレス/mon_archive_cabinet_RFID/api/GetCardNumを に変更します/RFID/api/GetCardNum)、リバース プロキシ/mon_archive_cabinet_RFIDを に変更します/RFID(変更理由については、下記の問題 2 の説明を参照してください)。- 検証【問題2解決】
【質問1】原因
/apiプロキシの意味:リクエスト アドレスに が含まれている限り/api、このプロキシが使用され、このプロキシの下にある他のプロキシは使用されません。
^/apiプロキシの意味:で始まるリクエスト アドレスのみが/api一致し、残りは一致します。一致しないため、プロキシを
次のように変更します/api^/api
【質問2】原因
問題を順番に並べ、最初の問題に対処する
/mon_archive_cabinetプロキシ: 使用したいリクエスト アドレスにはプロキシが/mon_archive_cabinet_RFID/api/GetCardNum含まれています&&リクエスト アドレスの先頭はプロキシと一致しています(あいまい一致)&&プロキシはプロキシ コードの前にあるため、プロキシは一致し、プロキシと一致し続けませんプロキシコードの後に【解決策】2つの方法/mon_archive_cabinet_RFID/mon_archive_cabinet_RFID
/mon_archive_cabinet_RFIDエージェント コードは/mon_archive_cabinetエージェント コードの前に配置します。/mon_archive_cabinet_RFIDプロキシ名とリクエストアドレスの開始アドレスを変更します（私が使用した解決策）。
[添付ファイル: トラブルシューティング コード]
代理配置 - 排查问题原因
devServer: {
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
open: true, // 自动打开浏览器
proxy: {
// ...
// '/api': {
'^/api': {
ws: false, // proxy websockets
target: 'http://192.168.0.42:9151',
pathRewrite: {
'^/api': '' },
changeOrigin: true,
logLevel: 'debug', // 该代码可在控制台输出代理的真实地址 - 但是我的就没有
onProxyRes(proxyRes, req, res) {
console.log('req.url----api----', req.url) // 会在终端打印出当前请求地址 - 不加域名的请求地址
// 增加代理的真实地址
const realUrl = new URL(req.url || '', 'http://192.168.0.42:9151' || '')
proxyRes.headers['x-real-url1'] = realUrl // 在请求头添加 x-real-url1 字段，展示实际请求的地址 - 代理之后地址
}
},
// ...
'/mon_archive_cabinet': {
target: 'http://192.168.0.26:9577',
changeOrigin: true,
logLevel: 'debug', // 该代码可在控制台输出代理的真实地址 - 但是我的就没有
onProxyRes(proxyRes, req, res) {
console.log('req.url----mon_archive_cabinet----', req.url) // 会在终端打印出当前请求地址 - 不加域名的请求地址
// 增加代理的真实地址
const realUrl = new URL(req.url || '', 'http://192.168.0.26:9577' || '')
proxyRes.headers['x-real-url1'] = realUrl // 在请求头添加 x-real-url1 字段，展示实际请求的地址 - 代理之后地址
}
},
// '/mon_archive_cabinet_RFID': { // 会和 /mon_archive_cabinet 代理冲突
'^/RFID': {
target: 'http://localhost:5001',
changeOrigin: true,
logLevel: 'debug', // 该代码可在控制台输出代理的真实地址 - 但是我的就没有
onProxyRes(proxyRes, req, res) {
console.log('req.url---RFID-----', req.url) // 会在终端打印出当前请求地址 - 不加域名的请求地址
// 增加代理的真实地址
const realUrl = new URL(req.url || '', 'http://localhost:5001' || '')
proxyRes.headers['x-real-url1'] = realUrl // 在请求头添加 x-real-url1 字段，展示实际请求的地址 - 代理之后地址
},
// pathRewrite: { '^/mon_archive_cabinet_RFID': '' }
pathRewrite: {
'^/RFID': '' } // 实际请求中请求地址不会加 /RFID
},
'/': {
target: 'http://192.168.0.42:9000'
}
}
},
3. まとめ - コードの解決
接口封装
export function GetCardNum() {
return request({
// url: 'http://192.168.10.106:5001/api/GetCardNum' // 本地ip
// url: 'http://localhost:5001/api/GetCardNum' // 测试接口时接口地址
// url: '/mon_archive_cabinet_RFID/api/GetCardNum' // 接口地址添加反向代理地址头（不用 - 因为会和 /mon_archive_cabinet 代理冲突）
url: '/RFID/api/GetCardNum' // 接口地址添加反向代理地址头
// url: '/mon_archive_cabinet/api/GetCardNum' // 排查问题时借用 /mon_archive_cabinet 地址头
})
}
代理配置
devServer: {
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
open: true, // 自动打开浏览器
proxy: {
// ...
'^/api': {
// 【解决问题主要代码】添加 ^ 表示以 /api 开头的地址代理到此处；不加 ^ 则只要地址里有 /api 就可代理此处，代理此处后则此处以下的代码将不会被代理到
ws: false, // proxy websockets
target: 'http://192.168.0.42:9151',
pathRewrite: {
'^/api': '' },
},
// ...
'/mon_archive_cabinet': {
target: 'http://192.168.0.26:9577',
},
// '/mon_archive_cabinet_RFID': { // 会和 /mon_archive_cabinet 代理冲突，所以不用
'^/RFID': {
target: 'http://localhost:5001',
// changeOrigin: true, // 默认是 true
// pathRewrite: { '^/mon_archive_cabinet_RFID': '' }
pathRewrite: {
'^/RFID': '' }
},
'/': {
target: 'http://192.168.0.42:9000'
}
}
},
4. まとめ - リバースプロキシ
- プロキシアドレスが複数ある場合：
- 特定のアドレスで始まるか、特定のアドレスが含まれるかに注意してください。
- あいまい一致は、一致するアドレス内の / と / の間の完全な一致ではないことに注意してください。
- 最後に書かれたプロキシが最初に書かれたプロキシによって優先されてリクエストが失敗することを防ぐために、プロキシ アドレスの順序に注意してください。
【注意】ローカルリバースプロキシとオンラインリバースプロキシ
フロントエンド vue プロジェクト
vue.config.jsで構成されたリバース プロキシは、フロントエンドのローカル実行プロジェクトでのみ役立ちます。オンライン デプロイ後、リバース プロキシはnginxバックエンドで構成されたプロキシを使用します。
- でクロスドメイン実行を
vue.config.js構成した後、パッケージがサーバーにデプロイされると、クロスドメインの問題またはインターフェイス要求 404が報告されます。エラーが報告されるのはなぜですか?proxynpm run build
- コンパイルとパッケージ化の後、フロントエンド ページは別の静的リソースになり、プロキシ サーバーが
devServer.proxy抽出されるためです。- つまり、
devServer.proxydist フォルダーに一緒にパッケージ化されないため、プロキシ サーバーを設定しないのと同じになります。！- どうやって解決すればいいでしょうか？リソースにアクセスするには、それをロードするためのプロキシ サーバーが必要です。
- デプロイしてオンラインにする最も一般的な方法は、リバース プロキシを使用することです。構成ファイルを変更する
nginxだけで済みます。nginx- ソース