• 架构设计-跨域问题的根源及解决方式

    前面文章《架构设计-web项目中跨域问题涉及到的后端和前端配置》中说明了处理跨域问题的一种方式，本文详细说明下产生跨域问题的原因及处理方式。

    一、产生跨域问题的原因：

    浏览器的同源策略：这是跨域问题的根本原因。同源策略是浏览器对JavaScript施加的安全限制，目的是出于浏览器安全考虑，防止恶意网站窃取数据。所谓“同源”指的是协议、域名、端口号都相同，只要有一个不相同，则被视为非同源。

    跨域就是在浏览器请求资源的过程中发生的。

    二、 解决跨域问题的常用方式：

    1. JSONP  （Json With Padding）

    利用了 script 标签没有跨域限制的特性，通过 src 属性发送一个带回调参数的 get 请求，实现跨域。

    一种略显古老的处理方式

    1. $.ajax({
    2.    type : "GET",
    3.    url : "http://abc.com/detail/",
    4.    data:"id=100",
    5.    dataType:"jsonp",
    6.    jsonp:"callback",
    7.    jsonpCallback:"showDetail",
    8.    success : function(data){
    9. 	   alert("ok");
    10.    },
    11.    error : function(data){
    12.    	   alert("no");
    13.    }
    14. });

    以上代码转换成 dom 文档

    1. html>
    2. <html>
    3.   <head>
    4.     <meta charset="utf-8">
    5.   head>
    6.   <body>
    7.     <script type='text/javascript'>
    8.       // 后端返回直接执行的方法，相当于执行这个方法，由于后端把返回的数据放在方法的参数里，所以这里能拿到res。
    9.       window.showDetail = function (res) {
    10.         console.log(res)
    11.         // ajax回调
    12.       }
    13.     script>
    14.     <script src='http://abc.com/detail?id=100&callback=showDetail' type='text/javascript'>script>
    15.   body>
    16. html>

    页面的 src 标签访问 abc.com 的服务端资源，由于