1. 程式人生 > >Vue跨域請求

Vue跨域請求

問題描述:

使用 Vue-cli 建立的專案,開發地址是 localhost:8023,需要訪問 localhost:9000 上的介面

分析原因:

不同域名之間的訪問,需要跨域才能正確請求。跨域的方法很多,通常都需要後臺配置

不過 Vue-cli 建立的專案,可以直接利用 Node.js 代理伺服器,實現跨域請求

解決方案:

介面地址原本為 /form/save,但是為了匹配代理地址,在前面加一個 /api

如果使用了 axios,可以全域性配置一個 baseURL,這樣就不用挨個兒修改 url 了

axios.defaults.baseURL = '/api'

在 config>index.js

 的 dev 中新增配置項 proxyTable

複製程式碼
    proxyTable: {
      '/api': {
        target: 'http://127.0.0.1:9000/',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'
        }
      }
    },
複製程式碼

其中 '/api' 為匹配項,target 為被請求的地址

因為在 ajax 的 url 中加了字首 '/api',而原本的介面是沒有這個字首的

所以需要通過 pathRewrite 來重寫地址,將字首 '/api' 轉為 '/'

如果本身的介面地址就有 '/api' 這種通用字首,就可以把 pathRewrite 刪掉