跨域在前端工程化中的实际解决方案。

最近hin忙，无暇更博，昨天还在加班，今天趁着周末，做一下总结。

跨域应该是前端无法避免的问题，解决跨域的方法，在此不作更多说明。而是从原理上说明在前端工作流中，面对跨域问题的一些解决方案（目前我所了解到的）。在此全部分享给大家。

 首先一些是需要后端配合完成的方法：

1.使用jsonp跨域解决

2. 修改后端配置，或针对某一接口设置可跨域访问。

其次在后端没办法协助解决的情况下，就需要我们自己动手解决。大部分思路都是将接口往当前的访问域转移。

1. 在后端设置了跨域之后，可利用jquery的跨域。

    $.ajax({
        type: args[0].type,
        url: args[0].url,
        xhrFields: {withCredentials: true},
        crossDomain: true,
        data: args[0].data,
        error: function(err) {
            args[0].fail(err);
        },
        success: function(msg) {
            args[0].success(msg);
        }
    });

2. 将接口转至当前访问域，再利用fiddler将127.0.0.1代理至mapi.ekwing.com

function proxyHandler(args) {
    console.log(args[0]);
    // fiddler 跨域代理
    if (args[0].url.match(/mapi/)) {
        args[0].url = args[0].url.replace('mapi.ekwing.com', '127.0.0.1:8082');
    }
    args[0].data.v = getUrlParm('v');
    $.ajax({
        type: args[0].type,
        url: args[0].url,
        xhrFields: {withCredentials: true},
        crossDomain: true,
        data: args[0].data,
        error: function(err) {
            args[0].fail(err);
        },
        success: function(msg) {
            args[0].success(msg);
        }
    });
}

3. 利用webpack的devserver进行跨域代理，根本原理和利用fiddler相似。

var devServer = {
    contentBase: '../build',
    host: '0.0.0.0',
    port: 8082, // 默认8080
    inline: true,
    open: false,
    hot: true,
    compress: true,
    watchContentBase: false,
    proxy: [{
        context: ['/student/Hw'],
        target: 'http://mapi.ekwing.com',
        changeOrigin: true
    }, {
        context: ['/he'],
        target: 'http://capi.sybrank.com',
        changeOrigin: true
    }]
};