1. 程式人生 > >Vue前端配置代理實現跨域請求

Vue前端配置代理實現跨域請求

跨域的解決方法:
        *設定讓伺服器允許跨域
        *前端配置代理實現跨域請求

本文介紹前端配置代理實現跨域請求:

 在專案config資料夾下的index.js檔案裡設定代理配置表

// 代理配置表,在這裡可以配置特定的請求代理到對應的API介面
    proxyTable: {
      '/api': { // 匹配所有以 '/api'開頭的請求路徑
        target: 'http://localhost:4000', // 代理目標的基礎路徑
        // secure: false,  // 如果是https介面,需要配置這個引數
        changeOrigin: true, // 支援跨域
        pathRewrite: { // 重寫路徑: 去掉路徑中開頭的'/api'
          '^/api': ''
        }
      }
    },

【注意】上面的target是你需要跨域到的目標,並不是前端伺服器的地址!這麼說吧,4000埠是伺服器埠,一般前端伺服器預設是8080埠!你現在因為埠不同需要跨域,所以要指定跨域的地址!

上述配置好之後,傳送請求時,請求字首不再是http://local:4000,而是/api。同時記得重啟專案,因為專案配置檔案改變了!