VueCLI+Webpack跨域解决方案-优快云博客

使用vuecli + webpack进行项目开发时，遇到了需要跨域访问的情况，这里简单记录一下前端的跨域配置，如下：

1、配置本地代理
修改config文件夹下的index.js文件中的dev下的proxyTable属性，如下：

	...
	dev: {
		// Paths
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {
            '/api': {
                target: 'http://localhost:8888',//后端接口地址
                changeOrigin: true,//是否允许跨越
                pathRewrite: {
                    '^/api': '',//重写,
                }
            }
        },
        host: 'localhost',
        port: 8080,
        autoOpenBrowser: false,
        ...
	}
	...

使用时，只需在需要跨域的url前加上/api的前缀，在访问时proxyTable会自动拦截并进行转换；如：当我们的api为/getDataList时,我们在用axios调用是需要写成/api/getDataList，那么在访问时，我们在network下看到的访问地址为：http://localhost:8080/api/getDataList,而真实的访问地址为：http:localhost:8888/getDataList；
这是因为我们浏览器交互的永远是我们本地的服务，当我们设置代理后，本地服务器会与另外的服务器(也就是我们要跨域访问的服务器)进行交互，并将获取到的数据返回给浏览器；

注：如果只配置这一步，跨域仅在开发环境中生效，如果想要在生产环境中配置，需要继续下面的步骤；

2、生产环境下配置
axios的默认实例有一个baseURL的属性，配置了baseURL之后，你访问接口时就会自动带上，所以我们可以根据当前的环境是开发环境还是生产环境来配置不同的baseURL，方法如下：
可以在config文件夹下新建一个api.config.js文件，内容如下：

//判断是否是生产环境
var isPro = process.env.NODE_ENV === 'production' //process.env.NODE_ENV用于区分是生产环境还是开发环境
//配置不同的baseURL
module.exports = {
    baseURL: isPro ? 'http://xxx:xxxx' : '/api'
}

process.env.NODE_ENV用于区分是生产环境还是开发环境，这个值是webpack设置的

3、设置axios的baseURL
在入口文件中引入axios和api.config.js文件,如下：

// 入口文件 main.js
import Vue from 'vue'
import axios from 'axios'
import apiConfig from '../config/api.config.js'
axios.defaults.baseURL=apiConfig.baseURL
...