請求場景：

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

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

使用axios請求 時(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ò)截圖

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

解決方法

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

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

devServer: {
    proxy: {
      "/proxy_url":{           // /proxy_url 這個(gè)用來和根路徑 baseURL 進(jìn)行匹配
        target: 'http://127.0.0.1:5000',  // 這個(gè)是填寫跨域的請求域名+端口號，也就是要請求的URL(不包含URL路徑)
        changeOrigin: true,  // 是否允許跨域請求，在本地會(huì)創(chuàng)建一個(gè)虛擬服務(wù)端，然后發(fā)送請求的數(shù)據(jù)，并同時(shí)接收請求的數(shù)據(jù)，這樣服務(wù)端和服務(wù)端進(jìn)行數(shù)據(jù)的交互就不會(huì)有跨域問題
        pathRewrite: {   // 路徑重寫
            '^/proxy_url': '/' // 替換target中的請求地址，原請求為 http://127.0.0.1:8000/kuayu 實(shí)際請求為 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請求正常使用就可以了 此處的完整請求URL是
http://127.0.0.1:5000/testcase_orm（步驟四只是提供一個(gè)示例，具體的請求URL按照自己項(xiàng)目的URL去請求）

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

vue跨域問題本次使用的是代理方案進(jìn)行解決，通過本地服務(wù)器進(jìn)行代理轉(zhuǎn)發(fā)到目標(biāo)服務(wù)器，跨域只針對瀏覽器，對于node服務(wù)發(fā)出的請求時(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論