Table of contents
1. Reverse proxy code (problematic)
接口封装
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'
}
}
},
question
Interface 404
2. Troubleshooting reasons
[Troubleshooting steps]
- Think about it : we need to first see
反向代理的真实地址where the interface request address is, and then see if it is a proxy problem or other problems;- Real address view
logLevel: 'debug': Add the configuration in the proxy configuration , and you can print out the proxy address of the requested address on the terminal, but my adding it is useless, the terminal does not output anything;- 2 If it doesn’t work, then find other ways to check the real address of the proxy:
onProxyResAdd the proxy configuration to the request header in Configurationx-real-url1to display the real request address;
- The proxy address found is
/apithe proxy address ofhttp://192.168.0.42:9151[Question 1]- [Solution to Problem 1] Modify
/apithe agent to^/api(see the explanation of Problem 1 below for the reason for modification)- It was found that the agent’s address changed to
/mon_archive_cabinetthe agent’s address again [Question 2]
- [Solution to Problem 2] Modify the prefix of the interface request address
/mon_archive_cabinet_RFIDto/RFID(that is, modify the interface request address/mon_archive_cabinet_RFID/api/GetCardNumto/RFID/api/GetCardNum), and modify the reverse proxy/mon_archive_cabinet_RFIDto/RFID(for the reason for modification, please see the explanation of Problem 2 below)- Verification [Problem 2 Solved]
【Question 1】Cause
/apiThe meaning of proxy is: as long as the request address contains/api, this proxy will be used, and other proxies below this proxy will not be used; the
^/apimeaning of proxy is: only the request address/apistarting with will be matched , and the rest will not match
[so] modify/apithe proxy to^/api
【Question 2】Cause
Sequence issues and address beginning issues
/mon_archive_cabinetProxy : The request address we want to use/mon_archive_cabinet_RFID/api/GetCardNumcontains the proxy && The beginning of the request address is consistent with the proxy (fuzzy matching) && The proxy is/mon_archive_cabinet_RFIDbefore the proxy code , so the proxy is matched and does not continue to match the proxy after the proxy code/mon_archive_cabinet_RFID[
Solution 】2 ways
- Place
/mon_archive_cabinet_RFIDthe agent code/mon_archive_cabinetbefore the agent code;- Modify
/mon_archive_cabinet_RFIDthe proxy name and the starting address of the request address (the solution I used).
[Attachment: troubleshooting code]
代理配置 - 排查问题原因
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. Summary - solving the code
接口封装
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. Summary - Reverse proxy
- When there are multiple proxy addresses:
- Pay attention to whether it starts with certain addresses or contains certain addresses;
- Note that fuzzy matching is not an exact match between / and / in the matching address;
- Pay attention to the order of proxy addresses to prevent the proxy written at the end from being prioritized by the proxy written at the beginning, causing the request to fail.
[Note] Local reverse proxy and online reverse proxy
vue.config.jsThe reverse proxy configured in the front-end vue project is only useful for the front-end local running project. After online deployment, the reverse proxy usesnginxthe proxy configured in the backend.
vue.config.jsAfter configuringproxycross-domain execution innpm run build, if the package is deployed to the server, a cross-domain problem or interface request 404 will be reported. Why is the error reported?
- Because after compilation and packaging, the front-end page becomes a separate static resource , and the proxy server
devServer.proxyis extracted.- In other words,
devServer.proxyit will not be packaged into the dist folder together , so it is equivalent to us not configuring a proxy server! !- How to solve it? For a resource to be accessed, there must be a proxy server to load it.
- The most common way we deploy and go online is to use
nginxreverse proxy. You only need to modifynginxthe configuration file .- source