Vue如何设置跨域，当年在跨域踩过的那些坑

最近在学习Vue+element搭建一个后台管理项目。在实现跨域开发时踩过的那些坑。

1、开发环境下，如何做好跨域配置

    首先跨域我们要配置的文件有：config下的index.js

        dev: {

            proxyTable: {

                '/api': {

                        target: 'http://10.1.5.11:8080/',//设置你调用的接口域名和端口号

                        changeOrigin: true, //跨域

                        pathRewrite: {

                                   '^/api': '/' //这里理解成用‘/api’代替target里面的地址，

                                    后面组件中我们掉接口时直接用api代替

                                    比如我要调用'http://10.1.5.11:8080/xxx/duty?time=2017-07-07 14:57:22'，

                                    直接写‘/api/xxx/duty?time=2017-07-07 14:57:22’即可

                                    在开发环境显示地址：http://localhost:9600//api/xxx/duty?time=2017-07-07 14:57:22

                                        } }

config/dev.env.js：

   module.exports = merge(prodEnv, {

                                    NODE_ENV: '"development"',//开发环境

                                    API_HOST:"/api/"

                                    })

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

如我们部署的服务器端口是3001，需要前后端联调，第一步前端我们可以分生产production和开发development两种环境分别测试，

在config/dev.env.js和prod.env.js里也就是开发/生产环境下分别配置一下请求的地址API_HOST，开发环境中我们用上面配置的代理地址api，

生产环境下用正常的接口地址，所以这样配置，分别在config/dev.env.js和prod.env.js两个文件中进行以下配置。

生产环境配置：prod.env.js