當我們學習vue的時候，數據的請求也是很重要的
在處理數據請求的時候，我們會遇到一會跨域的問題，例如這樣，就是我們遇到了跨域的問題
Access to XMLHttpRequest at 'https://vue3-fjord-81553.herokuapp.com/api/resources' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
我們的解決方法是這樣的
完整的數據請求步驟
1.先安裝axios，
2.在src文件夾中創建一個文件夾actions，並創建一個文件index.js
3.在index.js中先引入我們安裝的axios
4.在整個項目的根目錄中創建一個文件，文件名是固定的叫vue.confijg.js
5.在vue.config.js中配置跨域的問題
module.exports = {
devServer:{
//設置跨域
proxy:{
"^/api":{
target:"https://vue3-fjord-81553.herokuapp.com",
changeOrigin:"true",
}
}
}
}
target的就是你的所有的一個路徑的前綴。也就是你的請求域名
6.回到你的index.js中，你就可以去實現你的路由請求了
6.1請求的方式有兩種一種是post,一種是get
其實只是方式的不同的不同
get:
export function fetchResources(){
return axios.get("/api/resources").then((res)=>res.data)
}
根據你的文檔看是否需要傳值，如果需要傳值，則你需要在（）中進行傳值，並在地址之后添加，傳給后台，如果不需要則（）中可以為空
post:
export function createResource(item){
return axios
.post("/api/resources",item)
.then((res)=>res.data)
.catch((error) =>{
return Promise.reject(error?.response?.data)
})
}
此條實例是我們要添加數據，所以我們需要把添加的數據傳給后台，是需要傳值的，所以這里是有參數的，
item之前是地址，item 是一個參數
7.當我們這些數據請求的代碼寫好之后，我們需要在實施數據請求的頁面中書寫數據請求的准備了，在數據請求中，vuecli3是放在onMounted中的，同時我們需要把你數據請求的數據也要給引入過來
import {onMounted} from "vue"
import {請求數據名} from "@/actions/index.js"
請求頁面的請求代碼書寫
onMounted(async()=>{
const resource = await fetchResources();
data.resource = resource;
}
await 的后面就是數據請求的名字（你自己剛才定義的，用resource來接收，data.resource是你在頁面中定義的數據，並將data.resource擁有等同於resource的值，使得data.resource中是有值的