前端署理，办理跨域题目解说
proxy: {‘/dev-api’: { // 匹配所有以 ‘/dev-api’开头的请求路径
target: ‘http://localhost:8800’,
changeOrigin: true, // 支持跨域
pathRewrite: { // 重写路径: 去掉路径中开头的’/dev-api’
‘^/dev-api’: ‘’
}
}
}
这段代码生存在前端项目标根路径的 vue.config.js文件中
这段代码是基于 Webpack Dev Server 的署理配置，通常用于开发环境，目标是办理前端开发中的跨域题目以及简化开发流程。以下是对这段代码的详细解说：
1. 背景和用途
在前端开发中，前端应用和后端服务通常运行在不同的服务器和端口上。例如：
[*]前端代码运行在 http://localhost:3000（Webpack Dev Server）。
[*]后端接口运行在 http://localhost:8800。
由于浏览器的 同源策略，前端代码无法直接向后端接口发送请求（除非后端支持 CORS）。为了办理这个题目，Webpack 提供了署理功能，答应前端开发时将请求转发到后端服务。
2. 代码剖析
proxy: {
'/dev-api': { // 匹配所有以 '/dev-api'开头的请求路径
target: 'http://localhost:8800',
changeOrigin: true, // 支持跨域
pathRewrite: { // 重写路径: 去掉路径中开头的'/dev-api'
'^/dev-api': ''
}
}
}
2.1 /dev-api
这是署理的路径匹配规则。它表现所有以 /dev-api 开头的请求路径都会被署理。例如：
[*]前端请求路径：http://localhost:3000/dev-api/user。
[*]这个路径会被署理到后端服务。
2.2 target: 'http://localhost:8800'
这是目标服务器的地点。Webpack Dev Server 会将匹配到的请求转发到 http://localhost:8800。例如：
[*]前端请求：http://localhost:3000/dev-api/user。
[*]署理后请求：http://localhost:8800/dev-api/user。
2.3 changeOrigin: true
这个选项的作用是修改请求的 Origin 头，使其看起来像是直接从目标服务器发出的。它的主要用途是办理跨域题目：
[*]跨域题目：浏览器会检查 Origin 头是否与目标服务器匹配。如果不匹配，会拒绝请求。
[*]changeOrigin: true：会将请求的 Origin 头设置为目标服务器的地点（http://localhost:8800），从而绕过跨域限定。
2.4 pathRewrite: { '^/dev-api': '' }
这是一个路径重写规则，用于修改请求路径。它的作用是去掉路径中开头的 /dev-api 部分。例如：
[*]前端请求路径：http://localhost:3000/dev-api/user。
[*]重写后路径：http://localhost:8800/user。
为什么要重写路径？
[*]前端开发时，我们盼望请求路径包罗 /dev-api 前缀，以便区分署理请求。
[*]但后端服务可能并不需要这个前缀，因此需要通过 pathRewrite 去掉它。
3. 工作流程
以下是这段代码的工作流程示例：
[*] 前端请求：
[*]用户在浏览器中访问 http://localhost:3000/dev-api/user。
[*] Webpack Dev Server 拦截请求：
[*]Webpack Dev Server 检测到路径以 /dev-api 开头，触发署理规则。
[*] 路径重写：
[*]原路径：/dev-api/user。
[*]重写后路径：/user。
[*] 转发请求：
[*]请求被转发到目标服务器：http://localhost:8800/user。
[*]同时，changeOrigin: true 修改了请求的 Origin 头，使其看起来像是直接从 http://localhost:8800 发起的。
[*] 响应返回：
[*]后端服务器处置惩罚请求并返回响应。
[*]Webpack Dev Server 将响应返回给前端。
4. 优点
[*]办理跨域题目：通过署理和 changeOrigin，避免了浏览器的跨域限定。
[*]开发友爱：前端开发时可以利用统一的路径（如 /dev-api），而不需要关心后端的实际路径。
[*]简化开发流程：无需在后端开启 CORS 支持，降低了开发环境的复杂性。
5. 注意事项
[*]仅适用于开发环境：这种署理配置主要用于开发阶段。在生产环境中，前端和后端通常会部署在同一域名下，大概通过反向署理（如 Nginx）办理跨域题目。
[*]性能影响：署理会增长请求的处置惩罚时间，因为它需要额外的转发和重写操作。
[*]调试题目：如果署理配置错误，可能会导致请求无法正确转发，需要仔细检查路径匹配和重写规则。
6. 扩展
如果需要更复杂的署理规则，可以利用正则表达式匹配路径，大概配置多个署理规则。例如：
proxy: {
'/dev-api': {
target: 'http://localhost:8800',
changeOrigin: true,
pathRewrite: { '^/dev-api': '' }
},
'/another-api': {
target: 'http://localhost:9900',
changeOrigin: true,
pathRewrite: { '^/another-api': '' }
}
}
如许可以同时署理多个后端服务。
盼望这些内容能资助你更好地明白这段代码的作用和原理！
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]