跨域、同源策略

1、浏览器同源策略

浏览器最核心&最基本的安全功能；若无此策略，不同源的网站可以获取到cookie等，互联网就无安全可言；

同源三要素：

• 协议相同
• 域名相同
• 端口相同

eg：

基于：http://www.example.com/dir/page.html

URL	结果	原因
http://www.example.com/dir2/other.html	同源	只有路径不同
http://www.example.com/dir/inner/another.html	同源	只有路径不同
https://www.example.com/secure.html	失败	协议不同
http://www.example.com:81/dir/etc.html	失败	端口不同 ( http:// 默认端口是80)
http://www.baidu.com/dir/other.html	失败	主机不同

2、AJAX如何规避跨域

2.1、AJAX跨域请求

本地用nginx或者openresty起一个服务，然后打开火狐或者谷歌浏览器，在console中输入：

$.ajax({                       
        type:"get",
        url:"http://localhost:80",
        async:true,
        success:function(res){
            console.log(res)
        },
        error:function(){
            console.log("error")
        }
    });

 返回结构如下：

已拦截跨源请求：同源策略禁止读取位于 http://localhost:5000/ 的远程资源。（原因：CORS 头缺少 'Access-Control-Allow-Origin'）。

查看nginx或者openresty日志，服务端有请求记录，说明：浏览器在接收加载资源之前对其来源进行了检查，然后限制加载，而不是通过对发出的请求进行检查是否同源，然后决定是否对该请求加以限制来实现。

2.2、解决方案

• JSONP
• WebSocket
• CORS（Cross-Origin Resource Sharing）

2.2.1、CORS

浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

• 简单请求：需满足一下条件

（1) 请求方法是以下三种方法之一：

• HEAD
• GET
• POST

（2）HTTP的头信息不超出以下几种字段：

• Accept
• Accept-Language
• Content-Language
• Last-Event-ID
• Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

 根据服务端返回中的Access-Control-进行处理。

• 非简单请求：不同时满足上述请求