用代理解决跨域问题

• 创建时间: 20211105-5_155626
• 更新时间: 20211105-5_155626
• 版权作者: koalamini
• 当前版本: v1_beta
• 标签分类: #编程开发 #web #跨域 #代理 #proxy

---

用代理解决跨域问题

跨域问题：同源安全策略 默认阻止“跨域”获取资源。

跨域：不同IP/不同端口
本机地址：192.168.10.1:8080
目标地址1：192.168.10.2:8080（IP不同）
目标地址2：192.168.10.1:9090（端口不同）

代理(proxy)：将目标地址伪装为本机地址

Quasar的代理配置如下

'/test1': { // 代理路径
	target: 'http://192.168.10.2:8080', // 代理目标
	changeOrigin: true, // 是否代理？
	pathRewrite: { '^/test1': '' } // 去除代理路径
 }

意思是将http://192.168.10.2:8080伪装为本机的/test1，假设代理请求为/test1/getData，实际请求的是http://192.168.10.2:8080/getData

fetch('/test1/getData', requestOptions)
	.then(response => response.text())
	.then(result => {
		console.log(result)
	})

pathRewrite是改写路径，假设我们要访问目标地址2，那么Quasar的配置可以写为：

'/test2': { // 代理路径
	target: 'http://192.168.10.1:9090', // 代理目标
	changeOrigin: true, // 是否代理？
	pathRewrite: { '^/test2': '/test2/api' } // 修改路径
 }

那么，实际请求的地址为http://192.168.10.1:9090/test2/api，fetch请求为：

fetch('/test2/getData', requestOptions)
	.then(response => response.text())
	.then(result => {
		console.log(result)
	})

实际的请求地址为http://192.168.10.1:9090/test2/api/getData