<template>
? <div>
? ? <button @click="getBookInfo">獲取書(shū)籍信息</button>
? </div>
</template>

<script>
import axios from "axios"
export default {
? name: 'App',
? methods:{
? ? getBookInfo(){
? ? ? axios.get("http://localhost:8080/downloads/data.json").then(
? ? ? ? ? response =>{
? ? ? ? ? ? console.log("請(qǐng)求成功了",response.data);
? ? ? ? ? },
? ? ? ? ? error => {"請(qǐng)求失敗了",error.message}
? ? ? )
? ? }
? }
}
</script>

點(diǎn)擊按鈕請(qǐng)求書(shū)籍的信息，其中http://localhost:8080/downloads/data.json返回了書(shū)籍信息：

當(dāng)我們點(diǎn)擊按鈕時(shí)，卻發(fā)現(xiàn)報(bào)錯(cuò)了：

這是跨域請(qǐng)求的錯(cuò)誤，當(dāng)協(xié)議名（http）、主機(jī)名（localhost）、端口號(hào)（8080）中有一個(gè)不一致會(huì)提示跨域請(qǐng)求。解決辦法有：1、cors；2、jsonp；3、代理服務(wù)器

我們來(lái)學(xué)習(xí)第三個(gè)，可以先查看下官方文檔 Vue Cli 配置參考：devServer.proxy

流程：8081 向 8080 請(qǐng)求數(shù)據(jù)，我們開(kāi)啟一個(gè)代理服務(wù)器，端口號(hào)和我們的 8081 相同

修改：

1、 vue.config.js，直接復(fù)制官網(wǎng)代碼，修改端口號(hào)為請(qǐng)求數(shù)據(jù)的端口8080

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
? transpileDependencies: true,
? lintOnSave:false,
? //開(kāi)啟代理服務(wù)器
? devServer: {
? ? proxy: 'http://localhost:8080'
? }
})

2、請(qǐng)求數(shù)據(jù)端口修改為本地端口 8081

3、由于修改了腳手架配置，所以先停掉端口，然后重新運(yùn)行

可以看到請(qǐng)求成功了

方式二

方式一有兩個(gè)不完美的地方：1、只能配置一個(gè)代理服務(wù)器。2、當(dāng)本地也就是 public 有相同數(shù)據(jù)，就不請(qǐng)求代理服務(wù)器了

1、修改 vue.config.js，注釋掉方式一的代碼，改為

devServer: {
? ? proxy: {
? ? ? '/api': {
? ? ? ? target: 'http://localhost:8080',
? ? ? ? pathRewrite:{'^/api':''},
? ? ? ? ws: true,
? ? ? ? changeOrigin: true
? ? ? }
? ? }
? }

2、請(qǐng)求路徑增加前綴

3、由于修改了腳手架配置，所以先停掉端口，然后重新運(yùn)行

vue 腳手架配置代理總結(jié)

方法一

在vue.config.js中添加如下配置：

devServer: {
? ? proxy: 'http://localhost:8080'
}

說(shuō)明：

1.優(yōu)點(diǎn)：配置簡(jiǎn)單，請(qǐng)求資源時(shí)直接發(fā)給前端(8080)即可。
2.缺點(diǎn)：不能配置多個(gè)代理，不能靈活的控制請(qǐng)求是否走代理
3.工作方式：若按照上述配置代理，當(dāng)請(qǐng)求了前端不存在的資源時(shí)，那么該請(qǐng)求會(huì)轉(zhuǎn)發(fā)給服務(wù)器（優(yōu)先匹配前端資源)

方法二

devServer: {
? ? proxy: {
? ? ? '/api': {//匹配所有以/api開(kāi)頭的路徑
? ? ? ? target: 'http://localhost:8080',//代理目標(biāo)的基礎(chǔ)路徑
? ? ? ? pathRewrite:{'^/api':''},//路徑重寫(xiě)，匹配api開(kāi)頭的字符串，并把a(bǔ)pi替換為空字符串
? ? ? ? ws: true,//用于支持websocket
? ? ? ? changeOrigin: true//請(qǐng)求來(lái)自于。即控制請(qǐng)求頭中host數(shù)據(jù)。默認(rèn)為true說(shuō)謊:來(lái)自8080;false如實(shí)回答來(lái)自代理服務(wù)器8081
? ? ? }
? ? }
? }

說(shuō)明：