比較老的方案是jsonp，本質(zhì)是利用script標(biāo)簽的跨域請求不會被瀏覽器攔截，需要后端配合支持cors請求，缺陷就是只能支持get請求。類似的還有img標(biāo)簽。
jsonp的原理是瀏覽器加載script標(biāo)簽的時候只會當(dāng)做文件加載，是可以跨域請求資源的，利用這點我們可以給src設(shè)置指定的跨域地址發(fā)get請求；然后script標(biāo)簽加載后會執(zhí)行內(nèi)部的代碼，這讓服務(wù)端可以返回一個前端聲明過的自執(zhí)行的函數(shù)，并帶上參數(shù)，這樣就完成了跨域請求。
jsonp的核心流程就是：
- 創(chuàng)建一個script標(biāo)簽，src設(shè)置指定的跨域請求地址，query帶參數(shù)和回調(diào)函數(shù)名，并聲明好這個回調(diào)函數(shù)。
- 服務(wù)端返回腳本，內(nèi)容是自執(zhí)行的回調(diào)函數(shù)。
現(xiàn)在大多用以下方案：
開發(fā)環(huán)境一般配置server代理就行，即配置devServer的proxy
devServer: {
proxy: {
'/api': {
target: 'http://localhost:5000', // 代理到localhost:5000
pathRewrite: { // 轉(zhuǎn)發(fā)的時候刪除與請求目標(biāo)地址無關(guān)的部分
'^/api': ''
},
ws: true, // 用于支持websocket，vue腳手架默認(rèn)是true可以不用配置
changeOrigin: true // 用于修改請求頭中的host字段，改成目標(biāo)地址的host
// changeOrigin vue腳手架默認(rèn)也是true可以不用配置
}
}
}
生產(chǎn)環(huán)境一般配置nginx反向代理
上面兩種都是利用代理服務(wù)繞過了瀏覽器的xhr請求（因此不會報跨域問題），直接與后臺發(fā)http請求
生產(chǎn)環(huán)境有些資源后端會直接配置允許cors請求（Access-Control-Allow-Origin），比如一些公共的庫。
以上問題都是需要跨域的場景，還有一類是不應(yīng)該跨域產(chǎn)生的問題：
csrf攻擊：如果你的項目使用了cookie作為登陸憑證，就需要考慮對cookie做安全控制，惡意腳本會通過xss漏洞生成一個鏈接跳轉(zhuǎn)到另一個網(wǎng)址，并通過document獲取cookie信息偽造登陸用戶，并向服務(wù)端發(fā)跨域請求竊取信息。解決這個問題需要服務(wù)端給cookie配置”httpOlny”來阻止瀏覽器操作cookie，還需要配置SameSite=Strict 阻止非同源cookie發(fā)送。這個功能依賴瀏覽器廠商支持，還是有風(fēng)險。因此目前主流都登陸驗證都不使用cookie，而是Oauth2.0認(rèn)證（CSRF攻擊與防范）
(https://segmentfault.com/a/1190000011145364)
