前端vue解決跨域之伺服器代理

文章目錄

• • Proxy代理作用:
  • 常見情況：
  • 使用方式：
  • • 代理具體配置示例：
    • 配置參數說明：
    • 配置思路：
  • 代理原理：
  • 總結：

Proxy代理作用:

前端伺服器代理的作用是，告訴伺服器将任何未知請求(沒有比對到靜态檔案的請求)，代理到一個另一個位址，進而解決跨域的問題

常見情況：

前端在向後端進行資源請求的時候，後端若未使用Cros中間件，則會出現跨域請求的問題，解決問題的辦法之一就是我們前端使用Proxy進行伺服器代理

使用方式：

在vue-cli2項目的config檔案夾下的index.js檔案中，可以在dev相關配置資訊中的proxyTable裡對一個或者多個伺服器進行代理

具體配置如下例所示

代理具體配置示例：

// 代理配置
proxyTable: {
	'/api': {
	    target: 'http://10.34.67.144:7777',
	    ws: true,
	    changeOrigin: true,
	    pathRewrite: {
	    	'^/api': '/'
	    }
	  },
	'/model': {
	    target: 'http://10.34.67.144:6666',
	    ws: true,
	    changeOrigin: true
	}
}
           

配置參數說明：

• target：target的值是請求伺服器的根路徑（代理至關重要的參數）
• ws： 布爾值，确定websocket是否代理
• changeOrigin：建立虛拟伺服器，值為true時代表允許跨域
• pathRewrite：路徑重寫，修改代理的路徑為目标值
• ……

配置思路：

1. 在某網絡請求完整路徑為’/api/ynai/static/ai/'的時候，出現了跨域的問題，之後則需要在前端對該網絡請求進行一次伺服器代理
2. 接下來，對上面請求進行代理的具體配置
3. 首先代理标志名，必須與請求路徑中頭部一緻，代碼示例如下：

   proxyTable: { '/api': {} }

4. 配置target參數，确定請求代理的伺服器根路徑，代碼示例如下：

proxyTable: {
	'/api': {
		target: 'http://www.baidu.com/'
	}
}
           

1. 根據需要确定ws（websocket代理）的布爾值

proxyTable: {
	'/api': {
		target: 'http://www.baidu.com/',
		ws: true
	}
}
           

1. 配置changeOrigin，指派為true，允許跨域

proxyTable: {
	'/api': {
		target: 'http://www.baidu.com/',
		ws: true,
		changeOrigin: true
	}
}
           

1. 根據需要配置pathRewrite參數

   若最終代理後的路徑中不需要/api，那麼需要配置pathRewrite參數對路徑進行重寫為’’

proxyTable: {
	'/api': {
		target: 'http://www.baidu.com/',
		ws: true,
		changeOrigin: true,
		pathRewrite: {
			'^/api': ''
		}
	}
}
           

代理原理：

假設有如下代理配置：

proxyTable: {
	'/aaa': {
		target: 'http://www.baidu.com/',
		ws: true,
		changeOrigin: true,
		pathRewrite: {
			'^/aaa': '' /将/aaa重寫為'',等價于去掉/aaa
		}
	}
}
           

則：

1. 發生網絡請求時，代理配置檔案會去正則比對網絡請求路徑，是否與代理比對（比如發生的請求為/aaa/static/ai/，代理配置了’/aaa’，則比對成功）
2. 比對成功後，代理配置生效，它會将請求/aaa/static/ai/，經過代理配置指定的方式處理，最後拼接到target指向的伺服器根路徑(http://www.baidu.com/)後面
3. 最終形成完整的請求路徑(http://www.baidu.com/static/ai)，跨域問題也就得以解決

總結：

前端進行伺服器代理配置的時候，必須保證代理配置檔案能夠比對到axios請求的url，才能夠正确的将target指向的伺服器位址與url拼接得到完整的跨域請求路徑，進而才能夠請求到遠端的資源