vue前端Cli配置解決跨域

主要通過Cli裏面的devServer選項進行配置:

devServer.proxy

如果你的前端應用和後端 API 服務器沒有運行在同一個主機上,你需要在開發環境下將 API 請求代理到 API 服務器。這個問題可以通過 vue.config.js 中的 devServer.proxy 選項來配置。

module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
}

比較好理解,前端配置代理,這會告訴開發服務器將任何未知請求 (沒有匹配到靜態文件的請求) 代理到http://localhost:4000。
cli的devServer使用的webpack一樣,舉個簡單配置例子:

module.exports = {
  devServer: {
  	port: 4000, //前臺代理端口
    proxy: {
      '/api': {
        target: 'http: //171.6.6.23:8080',//後臺接口
        ws: true, //如果要代理websockets
        changeOrigin: true //將選項changeOrigin設置true爲基於名稱的虛擬託管站點。
      }
    }
  }
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章