解決前端開發環境中的的跨域問題

1、爲何會有跨越問題
是客戶端瀏覽器同源策略致使的，就是瀏覽器不容許不一樣源的站點相互訪問。試想一下要是沒有這個，那站點裏的安全信息如cookie，帳號/密碼等是否是很容易被其它站點獲取。
2、解決思路
知道是客戶端瀏覽器爲了安全使用同源策略致使的，而服務端是沒有這個限制的，那咱們就只能經過服務端進行跨域了。無論是jsonp,core，仍是代理的方式，都是須要服務配合的。哈哈，這也是爲啥後端和生產環境下比較少據說跨域的問題，因此這裏介紹前端開發環境中的幾種解決方法。
3、解決方案
1.徹底交予後端解決，配值請求頭信息（core），前端什麼都不用作,如express.js中配置以下，其它後端語言配置同理

app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By",'3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});

2.使用nginx反向代理，在配置文件nginx.conf中找到server{}對象，更改項目地址root和配置代理地址proxy_pass，這個方法適合前端靜態文件使用：

location / {
    root   D:/browseClient/dist;  #本身的前端項目地址
    index  index.html index.htm;
}
#解決跨域
location /api {                                # 自定義nginx接口前綴
    proxy_pass   http://127.0.0.1:3000;            # 後臺api接口地址
            proxy_redirect default;      
    #設置主機頭和客戶端真實地址，以便服務器獲取客戶端真實IP
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;   
}

3.若是使用vue-cli搭建的項目，能夠直接使用proxyTable模塊，項目框架已經集成，找到配置文件在/confif/index.j，以下配置

//代理配置表，在這裏能夠配置特定的請求代理到對應的API接口
proxyTable:{
    "/adv":{
        target:"http://127.0.0.1:3000",//須要訪問的服務器地址
        changeOrigin:true,//true爲開啓代理
        pathRewrite:{
            '^/adv': '/'//路徑的替換規則
        }
    }，
    "/user":{
        target:"http://127.0.0.1:3000",//訪問的服務器地址
        changeOrigin:true,//true爲開啓代理
        pathRewrite:{
            '^/user': '/'//路徑的替換規則
        }
    }
}

顯然，大部分狀況咱們不可能爲每一個api接口都在這加一個規則，因此更好的配置是：

proxyTable: {
    '**': {
        target: 'http://127.0.0.1:3000',
        changeOrigin: true,   //容許跨域
    }
}

或者

proxyTable: [{
    context: ['/**']，
    target: 'http://127.0.0.1:3000'，
    changeOrigin: true,  //容許跨域
}]

是否是方便了不少
4.其它，如jsonp是經過接口回調的方式實現跨域，這個如今已經用的少了。window.postMessage() 是HTML5的一個接口，專一實現不一樣窗口不一樣頁面的跨域通信。這些是對單個接口或者頁面層面的跨域，使用也簡單就不詳細說了。