解決vue?cli3使用axios跨域問題

更新時(shí)間：2022年01月23日 10:44:25 作者：累成一條狗

這篇文章介紹了解決vue?cli3使用axios跨域問題，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

一、什么是跨域

1、跨域

指的是瀏覽器不能執(zhí)行其他網(wǎng)站的腳本。它是由瀏覽器的同源策略造成的，是瀏覽器對(duì)javascript施加的安全限制。

2、同源策略

是指協(xié)議，域名，端口都要相同，其中有一個(gè)不同都會(huì)產(chǎn)生跨域，在請(qǐng)求數(shù)據(jù)時(shí)，瀏覽器會(huì)在控制臺(tái)中報(bào)一個(gè)異常，提示拒絕訪問。

3、跨域問題怎么出現(xiàn)的

開發(fā)一些前后端分離的項(xiàng)目，比如使用 SpringBoot + Vue 開發(fā)時(shí)，后臺(tái)代碼在一臺(tái)服務(wù)器上啟動(dòng)，前臺(tái)代碼在另外一臺(tái)電腦上啟動(dòng)，此時(shí)就會(huì)出現(xiàn)問題。
比如：

后臺(tái) 地址為 http://192.168.70.77:8081
前臺(tái) 地址為 http://192.168.70.88:8080
此時(shí) ip 與端口號(hào)不一致，不符合同源策略，造成跨域問題。

二、使用 axios 演示并解決跨域問題（vue-cli3.0）

1、項(xiàng)目創(chuàng)建、與 axios 的使用

（1）step1：創(chuàng)建 vue 項(xiàng)目
參考 http://m.fzitv.net/article/235498.htm

（2）step2：使用 axios

參考 http://m.fzitv.net/article/235510.htm

2、跨域問題重現(xiàn)

（1）step1：刪去 vue 項(xiàng)目初始提供的部分代碼，如下圖

運(yùn)行截圖：

（2）step2：使用 axios

【App.vue】
<template>
    <div>
        <button @click="testAxios">TestAxios</button>
    </div>
    <!--App -->
</template>

<script>
    // 引入axios
    import Axios from 'axios'

    export default {
        methods: {
            testAxios() {
                const url = 'https://www.baidu.com/'

                Axios.get(url).then(response => {
                    if (response.data) {
                        console.log(response.data)
                    }
                }).catch(err => {
                    alert('請(qǐng)求失敗')
                })
            }
        }
    }
</script>

<style>

</style>

此時(shí)點(diǎn)擊按鈕，會(huì)出現(xiàn)跨域問題。

（3）常見錯(cuò)誤解決

【question1：】
 'err' is defined but never used (no-unused-vars)
 
 這個(gè)問題，是由于 vue 項(xiàng)目安裝了 ESLint 。
 
 暴力解決：直接關(guān)閉 ESLint
 在  package.json 文件中 添加 
 "rules": {
    "generator-star-spacing": "off",
    "no-tabs":"off",
    "no-unused-vars":"off",
    "no-console":"off",
    "no-irregular-whitespace":"off",
    "no-debugger": "off"
}

3、解決跨域問題

（1）step1：配置 baseURL

可以自定義一個(gè) js 文件，也可以直接在 main.js 中寫。

【main.js】
import Vue from 'vue'
import App from './App.vue'
// step1：引入 axios
import Axios from 'axios'

Vue.config.productionTip = false

// step2：把a(bǔ)xios掛載到vue的原型中，在vue中每個(gè)組件都可以使用axios發(fā)送請(qǐng)求,
// 不需要每次都 import一下 axios了，直接使用 $axios 即可
Vue.prototype.$axios = Axios

// step3：使每次請(qǐng)求都會(huì)帶一個(gè) /api 前綴 
Axios.defaults.baseURL = '/api'

new Vue({
  render: h => h(App),
}).$mount('#app')

（2）step2：修改配置文件（修改后要重啟服務(wù)）

vue 3.0 通過 vue.config.js 文件修改配置（若沒有，則直接在項(xiàng)目路徑下新建即可）。

【vue.config.js】
module.exports = {
    devServer: {
        proxy: {
            '/api': {
                // 此處的寫法，目的是為了 將 /api 替換成 https://www.baidu.com/
                target: 'https://www.baidu.com/',
                // 允許跨域
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}

（3）step3：修改 axios 使用方式

【App.vue】
<template>
    <div>
        <button @click="testAxios">TestAxios</button>
    </div>
    <!--App -->
</template>

<script>
    export default {
        methods: {
            testAxios() {
                // 由于 main.js 里全局定義的 axios,此處直接使用 $axios 即可。
                // 由于 main.js 里定義了每個(gè)請(qǐng)求前綴，此處的 / 即為 /api/， 
                // 經(jīng)過 vue.config.js 配置文件的代理設(shè)置，會(huì)自動(dòng)轉(zhuǎn)為 https://www.baidu.com/，從而解決跨域問題
                this.$axios.get('/').then(response => {
                    if (response.data) {
                        console.log(response.data)
                    }
                }).catch(err => {
                    alert('請(qǐng)求失敗')
                })
            }
        }
    }
</script>

<style>

</style>

重啟服務(wù)后，點(diǎn)擊按鈕，可以成功訪問。