VueCli4前端解決跨域問題

設置代理解決跨域

在vue項目開發時，需要請求后端，通常就會出現跨域問題。有2種常用的解決方案：

1、后端設置允許跨域訪問

2、前端通過代理進行訪問后端

這里用的是前端代理方法：

vue- ciI4是沒有build文件夾跟config文件夾，所有的配置都在Vue.config.js完成。

vue-cli2.X跨域配置一般都在config中的index.js配置。

vue-cli3跨域配置同vue- ciI4

在項目根目錄下創建vue.config.js文件

module.exports = {
 // 配置跨域代理
  devServer: {
    // Paths
    host: 'localhost',
    port: '8080',
    https: false,
    open: true,
    proxy: {
     '/api': { // 匹配所有以 '/api'開頭的請求路徑
      target: 'http://localhost:4000', // 代理目標的基礎路徑
      changeOrigin: true, // 支持跨域
      pathRewrite: {// 重寫路徑: 去掉路徑中開頭的'/api'
       '^/api': ''
      }
     }
    },
  }
}

由於我的路徑請求格式為/api/XXX，所以用的就是’/api’:{}。單引號內容根據實際情況進行調整

port：端口號是前端的端口號

open：啟動項目是否自動打開瀏覽器

targer：后端路徑