前后端分离

前后端分离的好处

1. 最大的好处就是前端JS可以做很大部分的数据处理工作，对服务器的压力减小到最小。
2. 后台错误不会直接反映到前台，错误接秒较为友好。
3. 由于后台是很难去探知前台页面的分布情况，而这又是JS的强项，而JS又是无法独立和服务器进行通讯的。所以单单用后台去控制整体页面，又或者只靠JS完成效果，都会难度加大，前后台各尽其职可以最大程度的减少开发难度。

个人理解上存在两种解释

• 第一种只是单纯的前后端分离，实在物理层面上的，将View层的任务分配给前端，Controller和Model层给后端，这就存在一个问题，就是后端的同事需要去关注前端的展示逻辑、而前端只要存在变化，后端的数据处理需要做相应的改变。
• 第二种是基于职责层面上的分离，将View和Controller层分配的前端，后端只处理Model和业务处理，这就需要Controller使用Node.js，M-V-C对应的是JAVA/PHP-JAVASCRIPT、HTML、CSS-Node.js。

跨域问题存在的原因

随着前后端分离技术的越来越盛行，跨域问题也逐渐凸显了出来。跨域问题的根本原因：因为浏览器收到同源策略的限制，当前域名的js只能读取同域下的窗口属性。什么叫做同源策略？就是不同的域名, 不同端口, 不同的协议不允许共享资源的，保障浏览器安全。同源策略是针对浏览器设置的门槛。如果绕过浏览就能实现跨域，所以说早期的跨域都是打着安全路数的擦边球，都可以认为是 hack 处理。这一段是我从别的地方cp过来的，大家将就着看吧。

这里要注意的是，只有访问类型为xhr（XMLHttpRequest)的才会出现跨域。

跨域问题的解决方案

• 修改浏览器的设置
• 修改请求的方式：jsonp
• CORS

修改浏览器配置解决跨域

以Google Chrome为例，浏览器以

"C:\ProgramFiles(x86)\Google\Chrome\Application\chrome.exe"
    --disable-web-security--user-data-dir

中模式打开，右键点击浏览器快捷方式，在目标中输入上述代码即可解决（不推荐）。

使用jsonp解决跨域

JQuery中的正常AJAX请求代码片段

$("#demo1").click(function(){
    $.ajax({
        url : 'http://www.tpadmin.top/Index/Test/crossDomain',
        data : {},
        type : 'get',
        success : function (res) {
            //No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1' is therefore not allowed access. 在执行时候报出的错误，这代表了跨域错误
            alert(res);
        }
    });
});

 JQuery中的使用JSONP的AJAX请求代码：

$("#demo2").click(function(){
    $.ajax({
        url : 'http://www.tpadmin.top/Index/Test/crossDomain',
        data : {},
        type : 'get',
        dataType : 'jsonp', 
        success : function (res) {
            alert(res);
        }
    });
});