配置proxyTable

在vue-cli项目中的config文件夹下的index.js配置文件中，找到 proxyTable 的位置：

  dev: {
    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},  // 在这儿呢
    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps)
    // In our experience, they generally work as expected,
    // just be aware of this issue when enabling this option.
    cssSourceMap: false
  }

在vue-cli项目中的config文件夹内新建 proxyConfig.js 文件：

module.exports = {
    proxy: {
        '/api': {    
            target: 'https://api.douban.com',  // 接口域名
            changeOrigin: true,  //是否跨域
            pathRewrite: {
                '^/api': ''   // 因为在 ajax 的 url 中加了前缀 '/api'，而原本的接口是没有这个前缀的,所以需要通过 pathRewrite 来重写地址，将前缀 '/api' 转为 '/'
            }
        }
    }
}

在刚刚打开的 index.js 文件中引入 proxyConfig.js 文件：

var proxyConfig = require('./proxyConfig')

在 proxyTable 位置 写上 proxyConfig.proxy

  dev: {
    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: proxyConfig.proxy,  // 在这儿呢
    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps)
    // In our experience, they generally work as expected,
    // just be aware of this issue when enabling this option.
    cssSourceMap: false
  }

然后运行命令 npm run dev，这时代理便已经配置好了

跨域问题

代理只是在开发环境（dev）中解决了跨域问题，生产环境中真正部署到服务器上如果是非同源还是存在跨域问题

前端处理

config/dev.env.js 配置：

module.exports = merge(prodEnv, {
  NODE_ENV: 'development',
  API_HOST:"/api/"  // 开发环境中使用上面配置的代理地址api
})

prod.env.js 配置：

module.exports = {
  NODE_ENV: 'production',
  API_HOST:'https://api.douban.com' //，生产环境下使用接口地址
}

配置好后程序会自动判断当前是开发还是生产环境，然后自动匹配API_HOST。接下来在组件中我们就可以通过process.env.API_HOST 使用地址

this.$axios.get(process.env.API_HOST+"v2/movie/top250?count=20",null).then(function(res){
                (res.status === 200) &&  (that.articles = res.data.subjects)
            });

后端处理

后端服务器配置允许cros跨域，即access-control-allow-origin：*允许所有访问的意思。
（此方法ie9及以下不好使。可使用 nginx 反向代理,一劳永逸 <– 线上环境可以用这个）

本地通过修改hosts文件实现域名本地解析

文件路径一般是C:\Window\System32\drivers\etc，打开 hosts 文件，在后面加入下面内容：

192.168.15.30  https://api.douban.com