快捷導(dǎo)航

Vue3.0?axios跨域請求代理服務(wù)器配置方式

更新時間：2022年04月18日 11:50:55 作者：tdl081071tdy

這篇文章主要介紹了Vue3.0?axios跨域請求代理服務(wù)器配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

axios跨域請求代理服務(wù)器配置

首先安裝axios

npm install axios

然后在vue.config.js文件下配置如下代碼

（若沒有vue.config.js文件可以自己創(chuàng)建這個文件）

module.exports = {
    devServer: {
        open: true,
        port: 8001,
        proxy: {
            '/apis': {
                target: 'http://localhost:8080/thinkphp/personal_blog/public/personal.php/personal/',  // target host
                ws: true,  // proxy websockets 
                changeOrigin: true,  // needed for virtual hosted sites
                pathRewrite: {
                    '^/apis': ''  // rewrite path
                }
            },
        }
    }  
};

其中open表示是否運行時就啟動app，port表示我們當(dāng)前vue頁面的端口比如下面我的頁面端口是8001那么這里就寫8001

然后proxy中的代碼就是跨域代理服務(wù)器的配置代碼

其中target就是目標api接口，比如你們接口為 http://localhost:8080/api/login 那么target就可以寫http://localhost:8080/api/

然后在項目中實際用我們就可以這么寫

axios.post('/apis/login', postData)
      .then(response => {
          // post 成功，response.data 為返回的數(shù)據(jù)
          console.log(response.data)
      })
      .catch(error => {
          // 請求失敗
          console.log(error)
      })

那個apis就是http://localhost:8080/api/ 也就是我們在target中配置的api接口，"/apis/"就是 pathRewrite中配置的