跨域在前端工程化中的實際解決方案。

最近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
    }]
};