快捷導(dǎo)航

解決Vue2跨域報(bào)錯(cuò)AxiosError?net::ERR_FAILED、?Network?Error、ERR_NETWORK

更新時(shí)間：2022年11月12日 09:06:24 作者：blog-xiaoh

這篇文章主要給大家介紹了關(guān)于解決Vue2跨域報(bào)錯(cuò)AxiosError?net::ERR_FAILED、?Network?Error、ERR_NETWORK的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下

請(qǐng)求場(chǎng)景：

當(dāng)前頁面URL：http://127.0.0.1:8000/testcase

跳轉(zhuǎn)請(qǐng)求頁面URL：http://127.0.0.1:5000/testcase_orm

使用axios請(qǐng)求時(shí) 頁面提示跨域報(bào)錯(cuò)

跨域報(bào)錯(cuò)信息

Access to XMLHttpRequest at ‘http://127.0.0.1:5000/testcase_orm’ from
origin ‘http://localhost:8080’ has been blocked by CORS policy: No
‘Access-Control-Allow-Origin’ header is present on the requested
resource.

AxiosError {message: ‘Network Error’, name: ‘AxiosError’, code:
‘ERR_NETWORK’

Vue2跨域問題報(bào)錯(cuò)截圖

通過對(duì)代碼以及報(bào)錯(cuò)信息分析，問題出現(xiàn)在跨域請(qǐng)求上，（跨域請(qǐng)求：跨域是指瀏覽器不允許當(dāng)前所在的源請(qǐng)求去訪問另一個(gè)不一樣的源請(qǐng)求，源是指請(qǐng)求協(xié)議、域名、端口號(hào)，這三個(gè)如果有一個(gè)不一致就是跨域請(qǐng)求）

當(dāng)前URL	請(qǐng)求URL	是否跨域	結(jié)果分析
http://www.kuakuakua.com	http://www.kuakuakua.com/index.html	否	同源（域名、協(xié)議、端口號(hào)一致）
http://www.kuakuakua.com	https://www.kuakuakua.com	跨域	協(xié)議不同（http/https）
http://www.kuakuakua.com	http://www.javashuo.com/	跨域	域名不同（www.kuakuakua.com/www.javashuo.com）
http://www.kuakuakua.com:8080	http://www.kuakuakua.com:8081	跨域	端口號(hào)不同（8080/8081）

解決方法

步驟一：在項(xiàng)目目錄下找到 vue.config.js 文件打開編輯

步驟二：按照?qǐng)D中的結(jié)構(gòu)，將給出的代碼復(fù)制到 module.exports 中

devServer: {
    proxy: {
      "/proxy_url":{           // /proxy_url 這個(gè)用來和根路徑 baseURL 進(jìn)行匹配
        target: 'http://127.0.0.1:5000',  // 這個(gè)是填寫跨域的請(qǐng)求域名+端口號(hào)，也就是要請(qǐng)求的URL(不包含URL路徑)
        changeOrigin: true,  // 是否允許跨域請(qǐng)求，在本地會(huì)創(chuàng)建一個(gè)虛擬服務(wù)端，然后發(fā)送請(qǐng)求的數(shù)據(jù)，并同時(shí)接收請(qǐng)求的數(shù)據(jù)，這樣服務(wù)端和服務(wù)端進(jìn)行數(shù)據(jù)的交互就不會(huì)有跨域問題
        pathRewrite: {   // 路徑重寫
            '^/proxy_url': '/' // 替換target中的請(qǐng)求地址，原請(qǐng)求為 http://127.0.0.1:8000/kuayu 實(shí)際請(qǐng)求為 http://127.0.0.1:8000/proxy_url/kuayu  
        }
      }
    }
  }

步驟三：找到main.js文件，將axios.defaults.baseURL 設(shè)置為 /proxy_url

axios.defaults.baseURL = ‘/proxy_url'

步驟四：然后xxx.vue文件中的methods中的axios請(qǐng)求正常使用就可以了此處的完整請(qǐng)求URL是
http://127.0.0.1:5000/testcase_orm（步驟四只是提供一個(gè)示例，具體的請(qǐng)求URL按照自己項(xiàng)目的URL去請(qǐng)求）

methods:{
    getCaseList: function(){
        console.log("xxxxxxxxx")
        console.log('查看接口調(diào)用是否成功')
        this.$axios.get('/testcase_orm').then((result)=>{
             console.log('查看接口調(diào)用是否成功，被調(diào)用則成功')
             console.log(result)
        })
    }
  }

解決方法解析：

跨域問題，可以讓服務(wù)端去添加請(qǐng)求頭字段信息以及允許跨域訪問，服務(wù)端的跨域問題不在本文章描述，感興趣可以去看博主的另一篇Django跨域問題解決的博文

vue跨域問題本次使用的是代理方案進(jìn)行解決，通過本地服務(wù)器進(jìn)行代理轉(zhuǎn)發(fā)到目標(biāo)服務(wù)器，跨域只針對(duì)瀏覽器，對(duì)于node服務(wù)發(fā)出的請(qǐng)求時(shí)不會(huì)出現(xiàn)跨域問題，從而解決瀏覽器跨域問題。

總結(jié)

到此這篇關(guān)于解決Vue2跨域報(bào)錯(cuò)AxiosError net::ERR_FAILED、 Network Error、ERR_NETWORK的文章就介紹到這了,更多相關(guān)Vue2跨域報(bào)錯(cuò)AxiosError net內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: