請求場景：

當前頁面URL：http://127.0.0.1:8000/testcase

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

使用axios請求 時 頁面提示跨域報錯

跨域報錯信息

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跨域問題報錯截圖

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

解決方法

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

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

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

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

axios.defaults.baseURL = ‘/proxy_url'

步驟四：然后xxx.vue文件中的methods中的axios請求正常使用就可以了 此處的完整請求URL是
http://127.0.0.1:5000/testcase_orm（步驟四只是提供一個示例，具體的請求URL按照自己項目的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)
        })
    }
  }

解決方法解析：

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

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

總結(jié)

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

最新評論