Vue打包上线后的跨域问题处理

由于开发环境和生产环境的不同，会导致vue访问出现跨域的问题。

一、开发环境跨域问题

1.config/index.js文件配置代理，找到proxyTable字段，如下面一样配置

dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/xxx': {
        target: 'http://xxx/api', //访问的接口1
        changeOrigin: true,
        pathRewrite: {
          '^/xxx': '/'
        }
      },
      '/yyy': {
        target: 'http://yyy/api', //访问的接口2
        changeOrigin: true,
        pathRewrite: {
          '^/yyy': '/'
        }
      },
    },

配置好后 访问的url就不用再其他地方带上域名了。这个只适合开发环境使用，因为开发环境的本地服务器，以及做好了代理的功能，无需去多余的操作。

二.生产环境跨域问题

为了不用反复在开发和打包之间切换访问的api域名代码。可以入下配置
找到config/prod.env.js。  这个config/dev.env.js开发环境的前面已经配置好了可以不用管了

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  APP_BASE_APP_API:'"http://xxxx"', //项目api地址1 注意里面的双引号
  APP_BASE_WWW_API:'"http://yyyy"', //项目api地址2
  ......
}

import axios from 'axios';
Vue.prototype.axios = axios.create({
  headers: {
    'content-type': 'application/json'
  }
})
Vue.prototype.$post = function (url, data = {}) {
  let _url = ''
  if (process.env.NODE_ENV === 'development') {//这个是开发环境下
    _url = url
  } else if (process.env.NODE_ENV === 'production') {//这个是生产环境下
    _url = url
    if (url.search(/http:\/\//) != -1 || url.search(/https:\/\//) != -1) {//直接全URL访问
      _url = url
    } else if (url.search(/\/xxx/) != -1) {//定义的开头uri 
      url = url.replace("xxx", "api"); //如果uri不一样就替换成一样的
      _url = process.env.APP_BASE_APP_API + url;
    } else {
      _url = url
    }
  }
 return new Promise((resolve, reject) => {
    this.axios.post(url, data).then(res => {
      resolve(res)
    }).catch(function(error) {
      reject(error)
    })
  })
}

以上就完成前端所有的准备工作， 如果只靠前端目前未找到解决的办法，有这方面知识的高手希望留个言

最后后端配置下服务器
Access-Control-Allow-Headers: *
Access-Control-Allow-Origin: *