vue --解決跨域問題
一、什么是跨域？
跨域問題一般是因為瀏覽器的同源策略問題。同源是指，協(xié)議+域名+端口 三者相同，既為同源。
同源策略限制以下幾種行為
- Cookie、LocalStorage 和 IndexDB 無法讀取
- DOM和JS對象無法獲取
- AJAX請求無法發(fā)送
二、跨域解決方案。
- 使用jsonp實現(xiàn)，網(wǎng)頁通過script標(biāo)簽向服務(wù)器請求json數(shù)據(jù)，服務(wù)器受到請求后，將數(shù)據(jù)放在一個指定名字的回調(diào)函數(shù)的參數(shù)里面?zhèn)鹘o前端。
<script src="http://www.test.com/getData?callback=getData"></script>
// 向服務(wù)器test.com發(fā)出請求，該請求的查詢字符串有一個callback參數(shù)，用來指定回調(diào)函數(shù)的名字
// 處理服務(wù)器返回回調(diào)函數(shù)的數(shù)據(jù)
<script type="text/javascript">
// 服務(wù)器返回的數(shù)據(jù)會放到回調(diào)函數(shù)里面
function getData(res){
// 處理獲得的數(shù)據(jù)
console.log(res.data)
}
</script>
- 在vue中實現(xiàn)跨域：在vue項目根目錄下找到vue.config.js文件,沒有的話創(chuàng)建一個就可以。
module.exports = {
devServer: {
open: true,
port: '9595',
proxy: { //配置跨域
'/api': {
target: 'https://xxxxxxxx', //這里后臺的地址模擬的;應(yīng)該填寫你們真實的后臺接口
changOrigin: true, //允許跨域
pathRewrite: {
/* 重寫路徑，當(dāng)我們在瀏覽器中看到請求的地址為：http://localhost:8080/api/core/getData/userInfo 時
實際上訪問的地址是：http://121.121.67.254:8185/core/getData/userInfo,因為重寫了 /api
*/
'^/api': ''
}
},
}
},
}
- 在configs.js文件中，添加下面判斷開發(fā)環(huán)境還是生產(chǎn)環(huán)境。更改baseUrl
const noAuthAxios = axios.create()
const authedAxios = axios.create()
const isPro = Object.is(process.env.NODE_ENV,'production') //判斷是否是生產(chǎn)環(huán)境
// authedAxios.defaults.baseURL = process.env.VUE_APP_BASE_URL
authedAxios.defaults.baseURL = isPro? process.env.VUE_APP_BASE_URL:'/api' //如果是生產(chǎn)環(huán)境，則使用接口地址，否則使用代理地址
- 完美解決
現(xiàn)在看到發(fā)送的請求都是 ：http://localhost:9595/api/xxxxx,
