<template>
? <div>
? ? <button @click="getBookInfo">獲取書籍信息</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("請求成功了",response.data);
? ? ? ? ? },
? ? ? ? ? error => {"請求失敗了",error.message}
? ? ? )
? ? }
? }
}
</script>

點擊按鈕請求書籍的信息，其中http://localhost:8080/downloads/data.json返回了書籍信息：

當我們點擊按鈕時，卻發(fā)現(xiàn)報錯了：

這是跨域請求的錯誤，當協(xié)議名（http）、主機名（localhost）、端口號（8080）中有一個不一致會提示跨域請求。解決辦法有：1、cors；2、jsonp；3、代理服務器

我們來學習第三個，可以先查看下官方文檔 Vue Cli 配置參考：devServer.proxy

流程：8081 向 8080 請求數(shù)據(jù)，我們開啟一個代理服務器，端口號和我們的 8081 相同

修改：

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

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

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

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

可以看到請求成功了

方式二

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

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

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

2、請求路徑增加前綴

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

vue 腳手架配置代理總結

方法一

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

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

說明：

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

方法二

devServer: {
? ? proxy: {
? ? ? '/api': {//匹配所有以/api開頭的路徑
? ? ? ? target: 'http://localhost:8080',//代理目標的基礎路徑
? ? ? ? pathRewrite:{'^/api':''},//路徑重寫，匹配api開頭的字符串，并把api替換為空字符串
? ? ? ? ws: true,//用于支持websocket
? ? ? ? changeOrigin: true//請求來自于。即控制請求頭中host數(shù)據(jù)。默認為true說謊:來自8080;false如實回答來自代理服務器8081
? ? ? }
? ? }
? }

說明：