vue跨域问题：代理（本地跨域）及巧用dev,prod配合后端实现项目跨域，后台添加请求头以及Nginx跨域配置

前言：

       严格意义来说，前端无法单独实现跨域，本地我们可以实现反向代理，但是打包以后的文件是没有服务的，必须通过后端设置请求头，或者nginx    中配置跨域文件，在server-localhost中配置跨域

一：前端设置代理实现本地跨域--------config/index.js

dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    /*
    * 在这里添加
    */
    proxyTable: {
      '/api': {
        target: 'http://10.145.0.91',
        changeOrigin: true,//是否跨域
        pathRewrite:{
          '^/api': ''//这里理解成用'/getEchartsDatas'代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
        }
      }
    },




    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 9000, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: true,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-


    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map',

    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,

    cssSourceMap: true
  },

调用部分：

   axios({
      url:'/tableApi/xl/findXlYcxx',//前段设置代理
      method: 'post',
    }).then((res) => {
      debugger
      if (res.status === 200) {
        commit("getXLtqyxfx", res)
      }
    }).catch((error) => {
      console.log(error);
    })

二、巧用dev.env.js和prod.env.js实现全局本地开发地址和打包地址的便捷切换，注单独使用请将跨域工作交给后端人员

dev.env.js部分：

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

//本地环境地址
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',

  API_ROOT: '"http://192.168.0.123"',//项目后台地址
  ServiceIP:'"http://localhost:9800/"',//地图服务地址
  TomcatIP:'"http://localhost:8080/"',//瓦片服务地址
})

prod.env.js

'use strict'

//开发环境地址
module.exports = {
  NODE_ENV: '"production"',

  API_ROOT: '"http://10.151.1.140"',//项目后台地址(140后台)
  ServiceIP:'"http://10.151.1.145:9200/"',//地图服务地址
  TomcatIP:'"http://10.151.1.145:8090/"',//瓦片服务地址
}

调用部分，首先main.js挂载到vue全局中

//配置公共请求地址
Vue.prototype.baseURL = process.env.API_ROOT;//后台地址
Vue.prototype.ServiceIP = process.env.ServiceIP;//地图服务地址
Vue.prototype.TomcatIP = process.env.TomcatIP;//瓦片服务地址

页面部分：

let baseUrl = this.baseUrl;//注意这个只有在vue组件中可以拿到，js中是不可以的，如果有需要请使用vuex
//本地路径：     http://192.168.0.123
//打包路径：     http://10.151.1.140

三、后台配置允许跨域，使用@CrossOrigin注解或使用全局配置

四、在生产环境中，跨域设置nginx配置文件