首先缨硝，跨域問(wèn)題的是如何產(chǎn)生的：瀏覽器的同源策略 （服務(wù)器可以不遵守）。
請(qǐng)求方式為XHR時(shí)罢低，如果客戶端和服務(wù)端之間滿足三個(gè)條件中的任意一個(gè)都會(huì)產(chǎn)生跨域：
1.協(xié)議不同；2.域名不同胖笛；3.端口不同
只有協(xié)議网持、域名、端口都相同時(shí)才符合同源策略长踊。
項(xiàng)目上線部署之后如果滿足同源策略是不會(huì)產(chǎn)生跨域問(wèn)題的功舀，但是在前后端分離的主流模式下，開發(fā)時(shí)就一定會(huì)碰見(jiàn)跨域問(wèn)題身弊，利用dev-server解決跨域的原理：將所有ajax請(qǐng)求發(fā)送給devServer服務(wù)器辟汰，再由devServer服務(wù)器做一次轉(zhuǎn)發(fā)，發(fā)送給服務(wù)器阱佛，由于ajax請(qǐng)求是發(fā)送給devServer服務(wù)器的帖汞，所以不存在跨域，而devServer由于是用node平臺(tái)發(fā)送的http請(qǐng)求凑术，自然也不涉及到跨域問(wèn)題翩蘸。借助這一特性，我們可以進(jìn)行代理轉(zhuǎn)發(fā)淮逊，利用 node 監(jiān)聽(tīng) web 服務(wù)器開啟的端口催首，并進(jìn)行代理轉(zhuǎn)發(fā)；
在vue.config.js文件中配置devserver實(shí)現(xiàn)跨域的詳解：
假設(shè)主機(jī)名為 localhost:8080 , 需要請(qǐng)求 API 的 url 是 http：//192.168.2.3:8080/user/list
將'/api'設(shè)置為：http://192.168.2.3:8080, 那么在具體定義api的時(shí)候需要將api拼接成：'baseurl（http://localhost:8080）/api/user/list',通過(guò)devserver代理為(http：//192.168.2.3:8080/user/list)
原因是不做任何處理時(shí)url是http://localhost:8080/user/list
proxy設(shè)置'/api'后代表對(duì)路徑為/api開頭的api做代理轉(zhuǎn)發(fā)泄鹏，那么需要首先在拼接url時(shí)拼上/api,即http://localhost:8080/api/user/list
然后代理主機(jī)名及端口（或者域名）http://localhost:8080/api/user/list 代理為 http：//192.168.2.3:8080/api/user/list
但是多了/api郎任，這不是理想的url，所以通過(guò)pathRewrite备籽，將'/api'重寫為''舶治，url最終為http：//192.168.2.3:8080/user/list
最終在封裝http請(qǐng)求之后，將'/api'拼在path前面，即可實(shí)現(xiàn)跨域訪問(wèn)歼疮。
還有一個(gè)問(wèn)題就是杂抽，現(xiàn)在后端基本都用微服務(wù)，或許不同模塊韩脏，服務(wù)器會(huì)啟用不同的端口缩麸，那么前端只配置單個(gè)字符串開頭的代理便不夠用了，
例如服務(wù)器還是192.168.2.3這個(gè)ip赡矢，但是用戶模塊服務(wù)端口為8080杭朱，角色模塊服務(wù)端口為8081，這時(shí)就可以配置兩個(gè)以解決模塊化的問(wèn)題吹散。
