vue-cli配置反向代理解決跨域及過程理解

vue-cli提供了配置反向代理的接口，即設置config/index.js中的proxyTable。配置如下:

dev: {
	......
	
	proxyTable: {
      '/api':{     //將www.exaple.com印射爲/apis
        target:'https://www.exaple.com',     //跨域地址
        changeOrigin:true,       //是否跨域
        secure:false,        //是否使用https
        pathRewrite: {
          '^/api': '/api'       //匹配以/api爲開頭的請求地址，並使用/api替換
        }
      }
    }
}

在組件中調用接口示例(axios)：

import axios from 'axios'

axios({
	method:'post',
	url:'/api/login',
	data:{
		username:'qwe',
		password:123456
	}
}).then();

上述示例請求的地址會被解析爲https://www.exaple.com/api/login。如果proxyTable中pathRewrite配置爲空，則請求的地址被解析爲https://www.exaple.com/login。

以上配置只是在開發環境（dev）中解決跨域。要解決生產環境的跨域問題,則在config/dev.env.js和config/prod.env.js裏也就是開發/生產環境下分別配置一下請求的地址API_HOST，開發環境中我們用上面配置的代理地址api，生產環境下用正常的接口地址。配置代碼如下：

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',     //開發環境
  API_HOST:"/api/"
})

module.exports = {
  NODE_ENV: '"production"',      //生產環境
  API_HOST:'"http://40.00.100.100:3002/"'
}