聊聊跨域

今天去面试和面试官聊到了跨域的问题，但这不是一个简单的问题……………….

当问及我怎么解决跨域问题时，脑子里面立马浮现自己前段时间在做音乐webApp项目时用到的jsonp跨域，清晰的记得当时是用jsonp，关于jsonp的实现原理这里不再赘述，推荐一篇不错的博文 http://blog.csdn.net/u014607184/article/details/52027879，当然除了jsonp推荐使用的那就
CORS(Cross-origin resource sharing)方式，在服务端设置响应头：’Access-Control-Allow-Origin’,’*’

回到主题，如果是vue项目在开发阶段可以通过代理服务器来解决跨域的问题，但是上线后会不会碰到接口不能访问的情况？？？

在本地跑的好好的Vue怎么发布到线上就不行了，思来想去觉得是环境问题。原来这是由于开发环境和生产环境的接口地址不同导致，发布后Vue无法访问接口，自然获取不到数据。
那么，如何优雅地解决这个问题，不需要频繁地切换接口地址。

首先，在config中找到以下两个文件：

/config/dev.env.js
/config/prod.env.js

这两个文件就是针对生产环境和发布环境设置不同参数的文件,打开dev.env.js文件，如下：

module.exports = {
    NODE_ENV: '"development"',
    APP_ORIGIN: '"https://wallstreetcn.com"'
}

在NODE_ENV下增加一行：

module.exports = {
    NODE_ENV: '"development"',
    BASE_API: '"http://192.168.0.140:3001"',
    APP_ORIGIN: '"https://wallstreetcn.com"'
}

然后修改prod.env.js:

module.exports = {
    NODE_ENV: '"production"',
    BASE_API: '"http://*.*.*.*:3001"',
    APP_ORIGIN: '"https://wallstreetcn.com"'
};

然后，在项目中这样调用：

// 配置API接口地址
var root = prod.env.BASE_API

或者是修改工程下config文件夹下的index.js中的dev:{}部分。代码如下：主要修改的是

proxyTable：{}内部的内容

dev: {
        env: require('./dev.env'),
        port: 8080,
        autoOpenBrowser: true,
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {
            '/api/**': {
                target: 'http://api.douban.com/v2', //表示你跨域请求的接口的域名
                secure: false, //如果是https接口，需要配置这个参数
                changeOrigin: true, //如果接口跨域，需要进行这个参数配置
            },
            '/users/*': {
                target: 'http://127.0.0.1:8089'
            }
        },
        // 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
    }

最后想问下：跨域问题不知到有没有用charles这个抓包工具来解决的？