這篇文章主要介紹了Vue解決ajax跨域的問(wèn)題，跨域請(qǐng)求：是指協(xié)議名、主機(jī)名、端口號(hào)三者有任何一個(gè)不一樣，而且跨域請(qǐng)求是請(qǐng)求發(fā)出去了，服務(wù)器接收并返回了結(jié)果，只是瀏覽器沒(méi)有接收響應(yīng)結(jié)果。感興趣的同學(xué)可以參考閱讀

（一）什么是跨域

同源請(qǐng)求就是指協(xié)議名、主機(jī)名、端口號(hào)三者一樣

跨域請(qǐng)求：是指協(xié)議名、主機(jī)名、端口號(hào)三者有任何一個(gè)不一樣，而且跨域請(qǐng)求是請(qǐng)求發(fā)出去了，服務(wù)器接收并返回了結(jié)果，只是瀏覽器沒(méi)有接收響應(yīng)結(jié)果?？缬蛉绻贿M(jìn)行處理會(huì)報(bào)錯(cuò)

（二）axios請(qǐng)求

（1）請(qǐng)求方式

xhr方法： new XMLHttpRequest() xhr.open() xhr.send()
jQuery方法： $get $post
axios ：（基于Promise風(fēng)格，現(xiàn)在用的較多）
fetch：（基于Promise風(fēng)格），fetch的兼容性較差
jQuery和axios 是對(duì) xhr方法的封裝，而fetch方法和xhr方法是平級(jí)的，都在window對(duì)象身上。

（2）如何發(fā)送axios請(qǐng)求

1、在vscode終端輸入命令 npm axios進(jìn)行安裝

2、在App.vue中進(jìn)行引入 import axios from 'axios'

3、發(fā)送請(qǐng)求

axios.get('url地址').then(

respone=>{

console.log('請(qǐng)求成功了',respone.data)

},

error=>{

console.log('請(qǐng)求失敗了',error.message)

}

（三）配置代理解決跨域問(wèn)題

原理：設(shè)置一個(gè)代理服務(wù)器，它的協(xié)議名、主機(jī)名、端口號(hào)和前端的一模一樣，這樣前端訪(fǎng)問(wèn)該代理服務(wù)器就沒(méi)有跨域問(wèn)題了。

當(dāng)該代理服務(wù)器收到前端的請(qǐng)求，再向其他服務(wù)器發(fā)送該請(qǐng)求，獲取數(shù)據(jù)，之后將數(shù)據(jù)返回給前端。

（1）方法一：使用vuecli配置代理服務(wù)器

1、開(kāi)啟server1服務(wù)器

2、vue.config.js:用來(lái)配置腳手架的全局配置，在module.exports中加入如下配置

devServer:{

proxy:'http://localhost:5000'

//語(yǔ)法：proxy:'協(xié)議名：//主機(jī)名：端口號(hào)'

}

當(dāng)前瀏覽器地址端口號(hào)為8080,需要向后端端口號(hào)為5000的地址請(qǐng)求數(shù)據(jù)，出現(xiàn)跨域問(wèn)題，使用代理服務(wù)器

3、在終端安裝axios，在app.vue中引入axios，再發(fā)送get請(qǐng)求

<template>

<button @click="getStudent">獲取學(xué)生信息</button>

</template>

<script>

import axios from 'axios'

export default {

name:'App',

methods:{

getStudent(){

axios.get('http://localhost:8080/students').then(

respone=>{

console.log('請(qǐng)求成功了',respone.data)

},

error=>{

console.log('請(qǐng)求失敗了',error.message)

}

)

}，

}

}

</script>

4、請(qǐng)求數(shù)據(jù)如下

5、用vuecli配置代理服務(wù)器的缺點(diǎn)

5.1 當(dāng)請(qǐng)求的資源代理服務(wù)器本身就有，就不會(huì)轉(zhuǎn)發(fā)請(qǐng)求，public文件夾中的東西就是代理服務(wù)器的資源。

例如：請(qǐng)求名稱(chēng)和public文件夾中資源的名稱(chēng)同名就會(huì)返回public中的資源，

請(qǐng)求結(jié)果為

5.2 只能配置一個(gè)請(qǐng)求代理服務(wù)器，即只能向一個(gè)服務(wù)器轉(zhuǎn)發(fā)請(qǐng)求

(2)方法二

1、開(kāi)啟兩個(gè)服務(wù)器

2、vue.config.js的第二種配置，可以配置多臺(tái)服務(wù)器，也不會(huì)出現(xiàn)public中同名請(qǐng)求錯(cuò)資源問(wèn)題

devServer: {
proxy: {
'/xkx': {// '/xkx'請(qǐng)求前綴，表示只要請(qǐng)求前綴是/xkx就走代理
target: 'http://localhost:5000',
// 將以xkx開(kāi)頭的請(qǐng)求，將開(kāi)頭的/xkx去掉，否則目標(biāo)服務(wù)器會(huì)找不到路徑的
pathRewrite: { '^/xkx': '' },
ws: true,//用于支持webscoket

//用與向目標(biāo)服務(wù)器說(shuō)明自己是哪臺(tái)服務(wù)器（即配置請(qǐng)求頭host）
// 如果為false則自己是哪臺(tái)服務(wù)器就說(shuō)是哪臺(tái)（host為8080）
// 如果為true，則目標(biāo)服務(wù)器是哪臺(tái)就說(shuō)自己是哪臺(tái)服務(wù)器（host為5000）
changeOrigin:true
},
// 可以設(shè)置多臺(tái)服務(wù)器
'/kk': {
target:'http://localhost:5001',
pathRewrite: { '^/kk': '' },
ws: true,
changeOrigin:true
}
}
}

3、App.vue中發(fā)送兩個(gè)請(qǐng)求

methods:{

getStudent(){

axios.get('http://localhost:8080/xkx/students').then(

respone=>{

console.log('請(qǐng)求成功了',respone.data)

},

error=>{

console.log('請(qǐng)求失敗了',error.message)

}

)

},

getCars(){

axios.get('http://localhost:8080/kk/cars').then(

respone=>{

console.log('請(qǐng)求成功了',respone.data)

},

error=>{

console.log('請(qǐng)求失敗了',error.message)

}

)

}

}