vue-cli先後端分離之本地環境proxy代理&跨域問題

先後端分離，你能夠理解爲這是兩個不一樣的項目，先後端其實已經跨域了。咱們在本地啓動項目的時候npm run dev即可以啓動咱們的項目了，一般咱們的請求地址是以localhost:8080來請求接口數據的，可是這僅僅是前端頁面的啓動，如何跟後臺交互拿到後臺數據呢？

經過在vue-cli配置文件裏面設置一個代理，就能解決跨域的問題，一般須要後臺來進行配置。

在config文件夾中新建一個文件命名爲proxyConfig.js :

//項目域名地址
const testurl = 'http://exaple.com';
const localurl = 'http://172.***.***.233:8084';//後端本地地址
let ROOT,ROOT1;
let PROXYROOT;//代理指向地址
//因爲封裝的axios請求中，會將ROOT打包進去，爲了方便以後再也不更改，判斷了當前環境，而生成的不一樣的ROOT
if (process.env.NODE_ENV === 'development') {
    //開發環境下的代理地址，解決本地跨域跨域
    ROOT = "/view" //公告接口
    ROOT1 = "/newsflashview" //快訊接口
    PROXYROOT = testurl
} else{
    //生產環境下的地址
    ROOT = testurl;
    PROXYROOT = testurl 
}

module.exports = {
    proxy : {
        [ROOT]: {    //將www.exaple.com印射爲ROOT 即/view
            target: PROXYROOT,  // 接口域名
            ws: true,
            changeOrigin: true 
        },
        [ROOT1]: {    //將www.exaple.com印射爲ROOT1 即/newsflashview
            target: PROXYROOT,  // 接口域名
            ws: true,
            changeOrigin: true 
        }
    },
}
//ROOT是根據你接口來的，此處個人接口服務器提供的接口爲：http://exaple.com/view/usermessage
複製代碼

vue-cli 2.0

vue proxyTable

var proxyConfig = require('./proxyConfig')
//修改項目中的config文件夾下的index.js配置文件中的dev：
dev: {
    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: proxyConfig.proxy,   
    cssSourceMap: false
  }
複製代碼

vue-cli 3.0

vue proxy

var proxyConfig = require('./proxyConfig')
//修改項目中的vue.config.js配置文件中的devServer：
// webpack-dev-server 相關配置
  devServer: {
    host: "localhost",
    port: 8080,
    https: false,
    open: true,
    hotOnly: false,
    // 配置多個代理
    proxy: proxyObj.proxy,// 設置代理
    //或直接這樣寫
    // proxy:{
    //     "/view": {
    //         target: "http://exaple.com",
    //         ws: true,
    //         changeOrigin: true,
    //         secure: false
    //       }
    //   }, 
    before: app => {}
  },
複製代碼

你們只需關注配置proxy，其餘配置不必定跟我如出一轍，能夠單獨像我這樣單獨抽出來爲一個js文件，也能夠直接寫在裏面，隨意喲