web跨域详解

本文讲述：什么是跨域，什么是域，什么是同源，为什么跨域和跨域产生的原因，跨域的几种解决方案和跨域的几种代码方式

概念

• 域：是一个抽象概念，在同一个域，即为同源。
• 同源：多个地址中，具有相同的协议（protocol）相同的主机（host）和相同的端口号（port）的称为"同源"。如：
  http://www.xxx.com/a.html 和 http://www.xxx.com/b 是同源。
  http://www.xxx.com/a.html 和 https://www.xxx.com/b 是"非同源"。其协议不同会引发端口不同，进入的是同一台主机但是是不同域。
  http://localhost:5000/a.html 和 http://127.0.0.1:5000/server 是"非同源"。虽然都是表示本机的，但是他们进入的手段和路径不同。
  http://www.xxx.com/a 和 http://192.168.2.2/b 域名和域名对应ip是“非同源”。
  在跨域问题上，域仅仅是通过“URL的首部”（window.location.protocol +window.location.host）来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。
• 跨域：广义上，跨域是指一个域下的文档或脚本试图去请求另一个域下的资源。
• 跨域的产生：大型网站提供很多功能，通常划为很多块，并且网页样式和逻辑等分离，存放在不同的文件夹下，这就很容易导致其需要的资源不在同一个域。 一般情况，资源跳转、资源嵌入、脚本请求都需要跨域。如，网页中显示天气就要调用外部其他网站的资源。
• 跨域问题：这里指狭义的跨域。即是说HTTP协议中的同源策略SOP（Same origin policy）要求：“ 只有"同源"地址才能发送异步请求，非同源发送异步请求会被浏览器拦截，但是，script 和 img 发起的请求除外“。 所以：1. 跨域问题存在于 使用HTTP协议的情况下。2. 利用script解决跨域问题。
• 跨域原理：通常为减轻web服务器的负载，我们把js、css，img等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，而这是被浏览器允许的，因此解决方法如下。

跨域问题的解决方法

基本跨域

通过动态创建script，跨域请求：

<script>
    $(function(){
		var script = document.createElement("script");
		script.type = "text/javascript"
		script.src = "http://localhost:11111/22-server";
		 var body = document.getElementsByTagName("body")[0]
	}
</script>

带参数情况跨域：

<script>
    $(function(){
		var script = document.createElement("script");
		script.type = "text/javascript"
		script.src = "http://localhost:11111/22-server?callback=my_process";
    	 var body = $("body")[0];
        body.append(script);
	}
</script>

使用jQuery封装的ajax方法，通过jsonp跨域

后端支持：

@app.route('/22-server')
def server22():
    callback = request.args['callback'] # 接收前端传递过来的名称为callback的参数
    return callback + "('这是22-server所响应的内容')"

方案1: 使用默认的跨域参数

        $.ajax({url:'请求地址',
	                type:'get',
	                dataType:'jsonp',
	                success:function(data){
	                    	xxx
	                }
        });

说明：
ajax会自动给后端传递callback(默认)，然后接收后端响应的data，简化了原生中另定义的函数等
data就是响应回来的数据，是JS对象

方案2: 自定义请求方式，自定义的跨域参数，自定义函数

        $.ajax({url:'xxx',
		            type:'xxx',
		            dataType:'jsonp',
		            jsonp:'call_back',   // 自定义了callback位置处的名称
		            jsonpCallback:'处理响应的函数名'
        });

待续…