前端處理跨域
一. 開發準備
- 開發工具：VScode
- 框架：Vue2
- 項目結構：vue腳手架生成的標準項目（以下僅顯示主要部分）
- 本地已搭建好的端口：8080
- 要請求的第三方接口：http://1.11.1.111:端口號/xxx-api/code
注意：前端環境已搭建好，必須確保axios 已下載
二. 需求分析
- 前端登錄頁（login - index.vue）的驗證碼需調用第三方的驗證碼接口，并將其顯示
三. 跨域
3.1 直接調用（跨域）
- 代碼實現
<script>
import axios from "axios";
export default {data(){return {}},methods:{fetchCode(){axios.get('http://1.11.1.111:端口號/xxx-api/code').then(res=>{console.log(res,"直接調用第三方接口")}) }}
}
</script>
- 結果：跨域
3.2 解決跨域：poxy
- 配置 main.js
// 跨域代碼，qualityPlatform可替換為任意axios.defaults.baseURL = "/qualityPlatform"
- 配置 config.js
module.exports = {dev:{assetsSubDirectory: 'static',assetsPublicPath: '/',proxyTable: { // 配置多個代理'/qualityPlatform': {target: 'http://1.11.1.111:端口號',pathRewrite: {'^/qualityPlatform': '/'},changeOrigin: true},'/api': {target: 'http://localhost:80', // 本地后端拋出的接口secure: false,pathRewrite: { // 路徑重寫'^/api': '/' // 替換target中的請求地址},changeOrigin: true // 在本地會創建一個虛擬服務端，然后發送請求的數據，并同時接收請求的數據，這樣服務端和服務端進行數據的交互就不會有跨域問題},},host: '0.0.0.0', port: 8080, autoOpenBrowser: false,errorOverlay: true,notifyOnErrors: true,poll: false, }
}
- 調用接口
<script>
import axios from "axios";
export default {data(){return {form:{img:""}}},methods:{fetchCode(){axios.get('/xxx-api/code').then(res=>{console.log(res,"直接調用第三方接口成功")// 處理base64編碼并展示this.form.image = `data:image/jpeg;base64,${res.data.img}`;}).catch(error=>{console.log(error,"ERROR");})}}
}
</script>
- 調用成功
四. 遇到的問題
-
調用第三方接口，返回 status 為200，但返回 data 為 html 內容
-
原因
（1）未配置 步驟三 3.2 中 的（1）；
（2）重名
